Gắn event với ID
Nếu bạn có một ID cụ thể trong trang web của bạn cái nhận dạng duy nhất một khu vực, bạn có thể gắn một event
với ID đó. Đây là một ví dụ:
//set a variable to refer to a specific ID
var specialSection=document.getElementById(“specialSection”);
//initiate this function when the user clicks the ID
specialSection.onclick=function(){
alert(“Hello World”)
};
Thêm event listeners bằng phương thức addEventListener()
Bạn cũng có thể thêm các event listeners sử dụng một phương thức được gọi là addEventListener(). Tuy nhiên, phương
thức này không được hỗ trợ trong IE 8, vì vậy nếu bạn sử dụng phương thức này, bạn cần thêm một vài hàm
conditional để kiểm tra chức năng trình duyệt trước khi chạy hàm.
Một vài thư viện Javascript, như Jquery tự động bao gồm kiểm tra chức năng liên trình duyệt. Hình thức để thêm event
listeners sử dụng phương thức này là như sau:
document.addEventListener(‘click’,my function,false);
Trong hình thức trên, bạn bắt đầu thêm phương thức vào object document. Trong cặp dấu (), liệt kê event listener
mà không có on (trong ví dụ này event listener là onclick, cái được rút ngắn thành click). Bạn sau đó thêm hàm
để chạy (hàm được khai báo ở nơi nào đó khác). False là tham số hiếm khi sử dụng và nâng cao cho xử lí sự
kiện.
Tham chiếu Event handlers (cái xử lí sự kiện)
Nếu event handler của bạn tham chiếu đến một phần tử cụ thể trên trang, và bạn gọi script của ban trước khi
phần tử load, đoạn script sẽ không làm việc vì phần tử là không có sẵn tại thời điểm script chạy. Bạn có thể
điền script trước tag body đóng để đảm bảo các phần tử load trước nhưng giả sử bạn muốn script của bạn chạy
sớm hơn – trước khi phần tử load, bạn có thể sử dụng hàm prepareEventHandlers() để load hàm khi trang load
//declare the function
function prepareEventHandlers(){
//get a specific page ID and assign it as a variable
var specialSection=document.getElementById(“specialSection”);
//initiate this function when the ID is clicked
specialSection.onclick=function(){
alert(“Hello World”)
}
}
Bây giờ gọi hàm prepareEventHandlers khi window load
window.onload=function(){
prepareEventHandlers();
}
Sử dụng kĩ thuật này, event sẽ được load trước phần tử nó đang lắng nghe. Chú ý rằng bạn có thể gọi hàm
window.onload chỉ một lần mỗi trang.