1. Dom Event trong JavaScript là gì?

Dom Event hay còn được dịch ra là sự kiện, là một tác động nào đó lên các đối tượng HTML thông qua cấu trúc DOM. Qua đó ta có thể bắt được sự kiện và yêu cầu Js thực thi một chương trình nào đó. Tất cả các Node của DOM đều tạo ra các hành động như vậy nhưng các sự kiện không giới hạn ở DOM, có các sự kiện khác như sự kiện chuột, sự kiện bàn phím, sự kiện tài liệu…

Ta có thể hiểu một các đơn giản nhất: Sự kiện là điều xảy ra khi người dùng tương tác với trang web

Ví dụ: xuất ra thông báo ‘bạn vừa click’ khi click vào thẻ div sau:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>laptrinhtudau.com</title>
</head>

<body>
    <div >Click vào chữ Học Js để xem kết quả</div>
    <div id="series" onclick="alert('Bạn vừa click')">Học Js</div>
    
</body>

</html>

Các sự kiện thường được bao bọc bằng một số hàm, thực thi sau khi sự kiện xảy ra. Sử dụng những sự kiện này, ta có thể tạo ra rất nhiều thứ vì bây giờ bạn có quyền kiểm soát hành động của người dùng. Ta có thể làm điều gì đó khi người dùng thực hiện một số hành động như nhấp vào nút.

Có hai thuật ngữ khi chúng ta bắt gặp các sự kiện trong phát triển web:

Event Listener :Trình xử lý sự kiện là một đối tượng lắng nghe một sự kiện nhất định như một cú nhấp chuột, nhấn phím, di chuyển chuột,…
Event Handler : Trình xử lý sự kiện nói chung là một hàm được gọi khi một sự kiện nhất định xảy ra.

Ta có thể đính kèm trực tiếp một sự kiện vào phần tử HTML dưới dạng một thuộc tính hoặc chúng ta có thể sử dụng javascript để thực hiện việc này.

2. Thêm trình xử lý sự kiện trong JavaScript

Người nghe sự kiện là thứ theo dõi những hành động sẽ được thực hiện khi một sự kiện cụ thể xảy ra. Nó lắng nghe sự kiện và kích hoạt chức năng. Nhưng ta phải đề cập cụ thể hành động sẽ được thực hiện trong trường hợp nào. Có 3 cách khác nhau để bạn có thể đính kèm bộ lắng nghe sự kiện vào một phần tử nhất định:

Sử dụng thuộc tính HTML
Sử dụng Thuộc tính DOM
Sử dụng phương pháp addEventListener

2.1. Sử dụng thuộc tính HTML

Ta có thể đặt trực tiếp trình xử lý sự kiện thành phần tử HTML dưới dạng thuộc tính được đặt tên on<event>và có thể kích hoạt sự kiện trên hành động đó.

Ví dụ: ta muốn click vào phần tử HTML thì sử dụng thuộc tính onclick cho nó:

<h2>Lắng nghe sự kiện bằng cách sử dụng thuộc tính HTML.</h2>
<button onclick="doSomething()" id="button"> Event</button>

<script>
  function doSomething() {
    alert("Event Fired");
  }
</script>

Trong ví dụ có một sự kiện được gắn vào button . Nhưng ta có thể đính kèm bao sự kiện tùy thích. Để đính kèm nhiều sự kiện, chỉ cần tách các sự kiện bằng dấu cách. Ví dụ <p onevent1=”doSomething()” onevent2=”doSomethingElse()”>

<h2>Nhiều sự kiện có thể được đính kèm vào một phần tử bằng cách sử dụng các thuộc tính HTML.</h2>
<button onclick="doSomething()" onmouseover="doSomethingElse()" id="button">Fire Event</button>

<script>
  function doSomething() {
    alert("Event Fired");
  }
  function doSomethingElse() {
    const button = document.getElementById("button");
    button.style.background = "tomato";
    button.style.padding = "5px";
  }
</script>

2.2. Sử dụng thuộc tính Dom

Mỗi phần tử trong DOM đều có một loạt các thuộc tính DOM, danh sách các thuộc tính đó có thể giúp chúng ta thêm một trình xử lý sự kiện vào phần tử. Ta có thể chỉ định một trình xử lý sự kiện bằng cách sử dụng thuộc tính DOM on<event> . Ví dụ như element.onclick

Ví dụ:

<button id="myBtn">Thử bấm</button>

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

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

Nếu chỉ định một trình xử lý sự kiện trực tiếp bằng cách sử dụng thuộc tính HTML thì trình duyệt sẽ đọc thuộc tính và tạo một hàm mới và gán nó cho thuộc tính DOM.

2.3. Phương thức addEventListener

Vấn đề cơ bản khi chỉ định trình xử lý sự kiện với phương pháp trên là bạn không thể đính kèm 2 trình xử lý sự kiện khác nhau cho một sự kiện duy nhất.

Ví dụ:

button.onclick = function () { alert(1) }
// replaces above handler
button.onclick = function () { alert(2) }

Có một cách khác để chỉ định các trình xử lý sự kiện mà không có vấn đề với abouve, sử dụng phương thức addEventListener . Nó sẽ gắn một trình xử lý sự kiện vào một phần tử HTML. Sự kiện mới được đính kèm không ảnh hưởng đến các sự kiện trước đó. Ta có thể thêm nhiều sự kiện vào phần tử giống như cách chúng ta đã sử dụng thuộc tính HTML. Sử dụng addEventListener() ta có thể thêm các sự kiện vào bất kỳ phần tử DOM nào không nhất thiết chỉ là các phần tử HTML.

Cú pháp addEventListener : element.addEventListener(event, callback function, useCapture);

Trong đó:

element : phần tử HTML đính kèm với sự kiện
event : tên sự kiện
callback function : hàm chạy sau khi sự kiện kích hoạt
useCapture : một giá trị boolean chỉ định sử dụng sự kiện tạo bởi hay ghi lại sự kiện. (Đây là một tham số tùy chọn và giá trị mặc định là false )

<button id="button">Click Me!</button>

  <script>
    const element = document.getElementById("button");
    element.addEventListener("click", message);
    function message() {
      alert("Button Clicked!")
    }
  </script>

Chú ý

Khi sử dụng addEventListener() , không sử dụng tiền tố ‘on’ trong tên sự kiện. Như việc thay vì sử dụng ‘onclick’, chỉ cần sử dụng ‘click’.

addEventListener rất có thể thêm nhiều phương thức giống nhau hoặc khác nhau vào một phần tử. Điều này có nghĩa là chúng ta có thể thêm 2 hoặc nhiều hơn 2 trình nghe sự kiện cho cùng một sự kiện.

<button id="button">Click</button>

<script>
  const element = document.getElementById("button");
  element.addEventListener("click", fxn1);
  element.addEventListener("click", fxn2);
  function fxn1() {
    alert("Nhấp vào Sự kiện Đã kích hoạt chức năng này");
  }
  function fxn2() {
    alert("Sự kiện nhấp chuột tương tự cũng kích hoạt chức năng này");
  }
</script>