15. AddEventListener() Và RemoveEventListener() Trong Lập Trình JavaScript

Trong lập trình JavaScript, addEventListener() và removeEventListener() là hai phương thức của DOM (Document Object Model) cho phép bạn thêm và loại bỏ các trình xử lý sự kiện vào một DOM Element. Sử dụng các phương thức này, bạn có thể lắng nghe các sự kiện (như click, mouseover, keydown, và nhiều sự kiện khác) và thực thi các hàm xử lý sự kiện tương ứng khi các sự kiện xảy ra.

addEventListener(): Phương thức addEventListener() cho phép bạn gắn một trình xử lý sự kiện vào một DOM Element. Khi sự kiện xảy ra trên phần tử, trình xử lý sự kiện sẽ được thực thi.

Cú pháp:

javascript

element.addEventListener(eventType, eventHandlerFunction);

element: Đối tượng DOM Element mà bạn muốn gắn trình xử lý sự kiện vào.
eventType: Tên của sự kiện mà bạn muốn lắng nghe (ví dụ: “click”, “mouseover”, “keydown”,…).
eventHandlerFunction: Hàm xử lý sự kiện sẽ được thực thi khi sự kiện xảy ra.

Ví dụ:

html

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

javascript

const myButton = document.getElementById("myButton");

function clickHandler() {
  console.log("Button được nhấn!");
}

myButton.addEventListener("click", clickHandler);

removeEventListener(): Phương thức removeEventListener() cho phép bạn loại bỏ trình xử lý sự kiện đã được gắn kết với một DOM Element bằng cách sử dụng addEventListener(). Điều này giúp bạn ngừng lắng nghe sự kiện trên phần tử khi bạn không cần nữa.

Cú pháp:

javascript

element.removeEventListener(eventType, eventHandlerFunction);

element: Đối tượng DOM Element mà bạn muốn loại bỏ trình xử lý sự kiện.
eventType: Tên của sự kiện đã được gắn trước đó (ví dụ: “click”, “mouseover”, “keydown”,…).
eventHandlerFunction: Hàm xử lý sự kiện đã được gắn trước đó.

Ví dụ:

html

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

javascript

const myButton = document.getElementById("myButton");

function clickHandler() {
  console.log("Button được nhấn!");
}

// Gắn trình xử lý sự kiện
myButton.addEventListener("click", clickHandler);

// Loại bỏ trình xử lý sự kiện sau 3 giây
setTimeout(function() {
  myButton.removeEventListener("click", clickHandler);
}, 3000);

Lưu ý rằng để loại bỏ trình xử lý sự kiện, hàm xử lý sự kiện phải được xác định trước đó bằng tên hoặc thông qua hàm đặt tên.

Leave a Comment Cancel Reply