Hướng dẫn attachevent trong javascript
Sự kiện HTML (HTML events)Sự kiện HTML là những thứ xảy ra do trình duyệt hay do người dùng. Nếu JavaScript được dùng trong trang thì các đoạn mã JavaScript sẽ thực hiện trên các sự kiện này. Show Một vài ví dụ về các sự kiện HTML: – Một trang web đã hoàn thành việc tải trang (sự kiện load) – Một phần tử button được nhấp chuột (sự kiện click) – Một trường input được thay đổi (sự kiện change) Gán các sự kiện đến phần tửHTML cho phép các thuộc tính trình xử lý sự kiện (event handler), kèm theo mã JavaScript, được thêm đến các phần tử HTML theo cú pháp: Dùng nháy đơn Hay dùng nháy kép Ví dụ dùng thuộc tính onclick để thêm trình xử lý sự kiện khi chúng ta nhấp chuột vào phần tử button: Mã HTML Vì mã JavaScript có thể quá dài, chúng ta có thể thường dùng các gọi hàm JavaScript. Ví trên có thể viết lại: Mã HTML Mã JavaScript function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
Gán các sự kiện đến phần tử dùng HTML DOMChúng ta cũng có thể gán các sự kiện bằng cách dùng HTML DOM trong JavaScript như ví dụ sau: Mã HTML
Mã JavaScript document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
Trình lắng nghe sự kiện DOM (DOM Event Listener)Sự kiện trong HTML DOMCó hai cách để sự kiện có thể lan truyền (event popagation) trong cây HTML DOM: lan truyền từ phần tử trong cùng đến phần tử ngoài cùng (event bubbling ) và lan truyền từ phần tử ngoài cùng đến phần tử trong cùng (event capturing). Ví dụ chúng ta có đoạn mã HTML sau:
Trực quan cây DOM  Giả sử chúng ta gán sự kiện click đến phần tử p và div thì: – Nếu chúng ta dùng kiểu bubbling thì sự kiện click của phần tử p sẽ được xử lý đầu tiên sau đó mới đến sự kiện click của phần tử div. – Nếu chúng ta dùng kiểu capturing thì sự kiện click của phần tử div sẽ được xử lý đầu tiên sau đó mới đến sự kiện click của phần tử p. Lắng nghe sự kiện với phương thức addEventListenerChúng ta có thể thêm trình xử lý sự kiện (event handler) đến các phần tử cụ thể bằng phương thức addEventListener. Phương thức addEventListener có thể: – Thêm một trình xử lý sự kiện đến một phần tử xác định (thêm mới và không “đè” lên các trình sự kiện sẵn có) – Thêm nhiều trình sự kiện đến một phần tử – Thêm nhiều trình sự kiện cùng kiểu, ví dụ click – Thêm trình lắng nghe sự kiện không chỉ cho các phần tử HTML mà là bất kỳ đối tượng DOM nào, ví dụ đối tượng window. – Làm việc độc lập giữa mã JavaScript và HTML. Cú pháp:
Ví dụ: thêm sự kiện kiểu click đến phần tử p và div, dùng kiểu lan truyền bubbling: Mã HTML
Mã CSS div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
Mã JavaScript var p = document.getElementsByTagName("p");
p[0].addEventListener("click", function() {
alert("You clicked the P element!");}, false);
var div = document.getElementsByTagName("div");
div[0].addEventListener("click", function() {
alert("You clicked the DIV element!");}, false);
Kết quả trên trình duyệt: Nếu chúng ta nhấp chuột vào dòng văn bản thì thông báo xuất hiện đầu tiên là: Khi nhấp OK, thông báo kế tiếp xuất hiện: Ví dụ: thêm sự kiện kiểu click đến phần tử p và div, dùng kiểu lan truyền capturing: Mã HTML
Mã CSS div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
Mã JavaScript var p = document.getElementsByTagName("p");
p[0].addEventListener("click", function() {
alert("You clicked the P element!");}, true);
var div = document.getElementsByTagName("div");
div[0].addEventListener("click", function() {
alert("You clicked the DIV element!");}, true);
Kết quả trên trình duyệt: Nếu chúng ta nhấp chuột vào dòng văn bản thì thông báo xuất hiện đầu tiên là: Khi nhấp OK, thông báo kế tiếp xuất hiện: Có thể thêm nhiều sự kiện cùng kiểu đến cùng một phần tử, ví dụ: element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Hay có thể thêm nhiều sự kiện khác kiểu đến cùng một phần tử, ví dụ: element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Xoá trình xử lý sự kiện với phương thức removeEventListenerChúng ta có thể dùng phương thức removeEventListener để xoá các trình xử lý sự kiện đươc thêm đến các phần tử bởi phương thức addEventListener. Cú pháp:
Ví dụ: xoá sự kiện kiểu click của phần tử div,kiểu lan truyền capturing: Mã HTML
Mã CSS div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
Mã JavaScript document.getElementById("myDIV").addEventListener("click",div_alert, true);
document.getElementById("myP").addEventListener("click",p_alert,true);
function div_alert() {
alert("You clicked the DIV element!");
}
function p_alert() {
alert("You clicked the P element!");
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener
("click",div_alert,true);
}
Kết quả trên trình duyệt: Nếu chúng ta nhấp chuột vào dòng văn bản thì thông báo xuất hiện đầu tiên là: Khi nhấp OK, thông báo kế tiếp xuất hiện: Nếu nhấn nút Try it và tiếp tục nhấp chuột vào dòng văn bản thì chỉ còn thông báo: * Chú ý: – Nếu chúng ta thay đổi giá trị tham số useCapture của phương thức removeEventListener từ true thành false thì removeEventListener sẽ không xoá sự kiện click của phần tử div vì chúng ta đã thêm trình sự kiện click đến div theo kiểu capturing. – Hai phương thức addEventListener và removeEventListener chỉ hỗ trợ trong các phiên bản sau:
Với các phiên bản trình duyệt cũ hơn, chúng ta có thể dùng các phương thức attachEvent và detachEvent ( có thể tham khảo tại https://www.w3schools.com/js/js_htmldom_eventlistener.asp ). – Tham khảo danh sách các sự kiện và cách sử dụng tại https://www.w3schools.com/jsref/dom_obj_event.asp < Cốt lõi JavaScript |
