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.

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


<element event='some JavaScript'>

Hay dùng nháy kép


<element event="some JavaScript">

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:

HTML


<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

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:

HTML


<button onclick="displayDate()">The time is?</button>

<p id="demo"></p>

JavaScript


function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

Gán các sự kiện đến phần tử dùng HTML DOM

Chú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:

HTML


<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

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 DOM

Có 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:


<div>

<p> My paragraph </p>

</div>

Trực quan cây DOM

Giả sử chúng ta gán sự kiện click đến phần tử pdiv 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 addEventListener

Chú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ã JavaScriptHTML.

Cú pháp:

Phương thức Mô tả
addEventListener (event, function, useCapture) Thêm trình xử lý sự kiện. event là kiểu sự kiện như click hay load; function là hàm chúng ta muốn gọi khi sự kiện event xuất hiện; useCapture xác định kiểu lan truyền sự kiện là capturing nếu nhận giá trị true và  xác định kiểu lan truyền sự kiện là bubbling nếu nhận giá trị false (mặc định).

Ví dụ: thêm sự kiện kiểu click đến phần tử pdiv, dùng kiểu lan truyền bubbling:

HTML


<div>

<p> Click this paragraph, I am Bubbling. </p>

</div>

CSS


div {

background-color: coral;

border: 1px solid;

padding: 50px;

}

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ử pdiv, dùng kiểu lan truyền capturing:

HTML


<div>

<p> Click this paragraph, I am Capturing. </p>

</div>

CSS


div {

background-color: coral;

border: 1px solid;

padding: 50px;

}

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 removeEventListener

Chú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:

Phương thức Mô tả
removeEventListener (event, function, useCapture) Xoá trình xử lý sự kiện. event là kiểu sự kiện như click hay load bị xoá; function là hàm bị xoá; useCapture nhận giá trị true xác định các trình xử lý sự kiện bị xoá trong kiểu capturing,  nhận giá trị false xác định các trình xử lý sự kiện bị xoá trong kiểu bubbling.

Ví dụ: xoá sự kiện kiểu click của phần tử div,kiểu lan truyền capturing:

HTML


<div id="myDIV">

<p id="myP"> Click this paragraph, I am Capturing. </p>

</div>

<button onclick="removeHandler()" id="myBtn">Try it</button>

CSS


div {

background-color: coral;

border: 1px solid;

padding: 50px;

}

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 addEventListenerremoveEventListener chỉ hỗ trợ trong các phiên bản sau:

Phương thức Chrome IE/Edge Firefox Safari Opera
addEventListener 1.0 + 9.0 + 1.0 + 1.0 + 7.0 +
removeEventListener 1.0 + 9.0 + 1.0 + 1.0 + 7.0 +

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 attachEventdetachEvent ( 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