Dom event listener

Posted on by mtoplistChuyên mục:Top List

JavaScript DOM EventListener

Phương thức addEventListener()

Phương thức addEventListener() gắn một trình xử lý sự kiện vào phần tử được chỉ định.

Ví dụ

document
.getElementById(
'btn'
).addEventListener(
"click"
, showDate);
function showDate() {
    
document
.getElementById(
'demo'
).innerHTML = 
Date
() ;
}

Xem kết quả

Phương thức addEventListener() gắn một trình xử lý sự kiện vào một phần tử mà không ghi đè các trình xử lý sự kiện hiện có. Có nghĩa là chúng ta có thể thêm nhiều trình xử lý sự kiện vào một phần tử.

Chúng ta có thể thêm nhiều trình xử lý sự kiện cùng loại vào một phần tử, tức là có thể có hai sự kiện “nhấp chuột” trên một phần tử.

Chúng ta có thể thêm trình xử lý sự kiện vào bất kỳ đối tượng DOM nào không chỉ các phần tử HTML, bao gồm cả đối tượng window.

Phương thức addEventListener() giúp chúng ta dễ dàng kiểm soát cách sự kiện phản ứng với một hiện tượng hay hành động.

Khi sử dụng phương thức addEventListener(), JavaScript được tách biệt khỏi mã HTML, giúp cho chúng ta dễ đọc hơn và cho phép thêm trình xử lý sự kiện ngay cả khi chúng ta không kiểm soát đánh dấu phần tử HTML đó.

Chúng ta cũng có thể dễ dàng loại bỏ trình nghe sự kiện bằng cách sử dụng phương thức removeEventListener().

Cú pháp

element.addEventListener(event, function, useCapture)

Tham số đầu tiên là loại sự kiện (như “click” hoặc “mousedown” hoặc bất kỳ Sự kiện DOM HTML nào khác.)

Tham số thứ hai là hàm chúng ta muốn gọi khi sự kiện xảy ra.

Tham số thứ ba là một giá trị boolean chỉ định sử dụng sự kiện tạo bọt hay ghi lại sự kiện. Tham số này là tùy chọn.

Lưu ý là chúng ta không sử dụng tiền tố “on” cho sự kiện, sử dụng “click” thay vì “onclick“.

Thêm một trình xử lý sự kiện vào một phần tử

Ví dụ sau hiển thị hộp cảnh báo “Hello JavaScript!” khi người dùng nhấp vào một phần tử.

Ví dụ

document
.getElementById(
'btn'
).addEventListener(
"click"
, function() {
        
alert
(
"Hello JavaScript!"
);
    });

Xem kết quả

Hoặc chúng ta cũng có thể tham chiếu tới một hàm “được đặt tên” bên ngoài.

Ví dụ

function showAlert() {
  
  alert
(
"Hello JavaScript!"
);    
}

Xem kết quả

Thêm nhiều trình xử lý sự kiện vào cùng một phần tử

Phương thức addEventListener() cho phép chúng ta thêm nhiều sự kiện vào cùng một phần tử mà không ghi đè các sự kiện hiện có.

Ví dụ

var
 x = 
document
.getElementById(
'btn'
);
x.addEventListener(
"click"
, showAlert1);
x.addEventListener(
"click"
, showAlert2);

function showAlert1() {
    
alert
(
"Hello JavaScript!"
);    
}
function showAlert2() {
    
alert
(
"Hello World!"
);    
}

Xem kết quả

Chúng ta cũng có thể thêm các sự kiện thuộc các loại khác nhau vào cùng một phần tử.

Ví dụ

x.addEventListener(
"mouseover"
, showEvent1);
x.addEventListener(
"click"
, showEvent2);
x.addEventListener(
"mouseout"
, showEvent3);

Xem kết quả

Thêm một trình xử lý sự kiện vào đối tượng window

Phương thức addEventListener() cho phép chúng ta thêm sự kiện trên bất kỳ đối tượng HTML DOM nào, như các phần tử HTML, tài liệu HTML, các đối tượng window, hoặc các đối tượng khác có hỗ trợ sự kiện, giống như đối tượng xmlHttpRequest.

Ví dụ sau mô tả một sự kiện sẽ kích hoạt khi người dùng thay đổi kích thước trình duyệt.

Ví dụ

window
.addEventListener(
"resize"
, function() {
        
document
.getElementById(
'demo'
).innerHTML = Math.
random
() ;
    });

Xem kết quả

Chuyển các tham số cho hàm

Khi chuyển các giá trị tham số, chúng ta sử dụng “hàm ẩn danh” gọi hàm được chỉ định với các tham số.

Ví dụ

document
.getElementById(
'btn'
).addEventListener(
"click"
, function() {
        myFunction(
4
, 
5
);
    });

Xem kết quả

Tạo bọt sự kiện hay bắt giữ sự kiện?

Có hai cách lan truyền sự kiện trong HTML DOM, dó là “tạo bọt” và “bắt giữ”.

Sự lan truyền sự kiện là một cách xác định thứ tự phần tử khi một sự kiện xảy ra. Nếu chúng ta có phần tử <p> bên trong phần tử <div> và người dùng nhấp vào phần tử <p>, thì sự kiện “click” của phần tử nào sẽ được xử lý đầu tiên?

Trong “tạo bọt”, sự kiện của phần tử bên trong nhất được xử lý trước rồi đến phần bên ngoài. Sự kiện nhấp chuột của phần tử <p> được xử lý đầu tiên, sau đó là sự kiện nhấp chuột của phần tử <div>.

Khi “bắt giữ”, sự kiện của phần tử bên ngoài nhất được xử lý trước và sau đó sự kiện nhấp chuột của phần tử bên trong. <div> sẽ được xử lý đầu tiên, sau đó là sự kiện nhấp chuột của phần tử <p>.

Với phương thức addEventListener(), chúng ta có thể chỉ định kiểu truyền bằng cách sử dụng tham số “useCapture“.

element.addEventListener(event, function, useCapture);

Giá trị mặc định là false, giá trị này sẽ sử dụng sự lan truyền “tạo bọt“, khi giá trị được đặt thành true, sự kiện sẽ sử dụng sự lan truyền “bắt giữ“.

Ví dụ

document
.getElementById(
'div1'
).addEventListener(
"click"
, function() {div1()}, 
false
);

document
.getElementById(
'p1'
).addEventListener(
"click"
, function() {p1()}, 
false
);

document
.getElementById(
'div2'
).addEventListener(
"click"
, function() {div2()}, 
true
);

document
.getElementById(
'p2'
).addEventListener(
"click"
, function() {p2()},
 true
);

Xem kết quả

Phương thức removeEventListener()

Phương thức removeEventListener() xóa các trình xử lý sự kiện đã được đính kèm với phương thức addEventListener().

Ví dụ

document
.getElementById(
'div1'
).addEventListener(
"mousemove"
, ranDom)
function ranDom() {
    
document
.getElementById(
'demo'
).innerHTML = Math.
random
() ;
}

document
.getElementById(
'btn'
).addEventListener(
"click"
, function() {
       
 document
.getElementById(
'div1'
).removeEventListener(
"mousemove"
, ranDom);
    });

Xem kết quả

Tham chiếu đối tượng sự kiện HTML DOM

Để biết danh sách tất cả các sự kiện HTML DOM, hãy xem Tham chiếu Đối tượng Sự kiện HTML DOM hoàn chỉnh .

mtoplist