Events và Event listeners
Mặc dù bạn có thể bắt đầu các hàm khi trang của bạn load, nhiều khi bạn sẽ muốn bắt dầu các hàm khi một người
dùng click lên một link, nhập một form, cuộn hay di chuyển chuột của anh ta trên một object, hay làm thứ gì
khác. Các hành động này gọi là events (sự kiện). Bạn có thể thiết lập các hàm cụ thể chạy khi người dùng thực
hiện một event. Các hàm này “lắng nghe” (listen) cho một sự kiện và sau đó khởi tạo hàm.
Các event listener phổ biến:
+ onload // khi trang load
+ onclick // khi một người dùng click lên một thứ gì đó.
+ onmouseover // khi một người dùng di chuyển chuột lên trên cái gì đó.
+ onfocus // khi một người dùng đặt con trỏ vào một trường form.
+ onblur // khi một người dùng rời khỏi một trường form.
Chú ý rằng mỗi event listener bắt đầu với on, toàn bộ chữ thường.
Thêm event listeners
Bạn có thể thêm event listener trực tiếp vào code HTML theo cách sau:
<button onclick=”alert(‘Hello World’);”></button>
Tuy nhiên, trộn code Javascript với HTML một cách trực tiếp là một thực hành tồi vì cùng nguyên nhân với việc
bạn không nên tích hợp các lệnh style vào HTML mà nên tham chiếu các styles trong một file CSS riêng.
Một cách phổ biến hơn để tích hợp event listeners là nhận dạng phần tử và thêm event listeners như là một
phương thức. Hình thức chung cho làm điều này là như sau:
myElement.onclick=function(){
//run your event handler here
};
Trong ví dụ này, myElement sẽ là một biến cái tham chiếu đến một style cụ thể trên trang của bạn.
Chú ý rằng từ function được viết không có tên vì code của nó được chỉ ra trong khối code cái theo ngay sau.
Cũng chú ý rằng phát biểu kết thúc với một dấu; sau dấu đóng }.