JavaScript HTML DOM EventListener
Phương thức addEventListener ()
Thí dụ
Thêm trình xử lý sự kiện kích hoạt khi người dùng nhấp vào nút:
document.getElementById("myBtn").addEventListener("click", displayDate);
Phương addEventListener()thức đính kèm một trình xử lý sự kiện vào phần tử được chỉ định.
Phương addEventListener()thức này đính kèm 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ó.
Bạn có thể thêm nhiều trình xử lý sự kiện vào một phần tử.
Bạn 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à hai sự kiện "nhấp chuột".
Bạn 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. tức là đối tượng cửa sổ.
Phương addEventListener()pháp này giúp bạn dễ dàng kiểm soát cách sự kiện phản ứng với hiện tượng sủi bọt.
Khi sử dụng addEventListener()phương pháp này, JavaScript được tách biệt khỏi đánh dấu HTML, để dễ đọc hơn và cho phép bạn thêm trình xử lý sự kiện ngay cả khi bạn không kiểm soát đánh dấu HTML.
Bạn có thể dễ dàng loại bỏ trình nghe sự kiện bằng cách sử dụng removeEventListener()phương pháp này.
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 ý rằng bạn 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ử
Thí dụ
Cảnh báo "Hello World!" khi người dùng nhấp vào một phần tử:
element.addEventListener("click", function(){ alert("Hello World!"); });
Bạn cũng có thể tham khảo một hàm "được đặt tên" bên ngoài:
Thí dụ
Cảnh báo "Hello World!" khi người dùng nhấp vào một phần tử:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Thêm nhiều trình xử lý sự kiện vào cùng một phần tử
Phương addEventListener()pháp này cho phép bạn thêm nhiều sự kiện vào cùng một phần tử mà không cần ghi đè lên các sự kiện hiện có:
Thí dụ
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Bạn 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ử:
Thí dụ
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Thêm một trình xử lý sự kiện vào đối tượng cửa sổ
Phương addEventListener()pháp này cho phép bạn thêm trình xử lý sự kiện trên bất kỳ đối tượng DOM HTML nào, chẳng hạn như các phần tử HTML, tài liệu HTML, đối tượng cửa sổ hoặc các đối tượng khác hỗ trợ sự kiện, chẳng hạn như xmlHttpRequestđối tượng.
Thí dụ
Thêm trình xử lý sự kiện sẽ kích hoạt khi người dùng thay đổi kích thước cửa sổ:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Các thông số vượt qua
Khi chuyển các giá trị tham số, hãy sử dụng "hàm ẩn danh" gọi hàm được chỉ định với các tham số:
Thí dụ
element.addEventListener("click", function(){ myFunction(p1, p2); });
Tạo bong bóng sự kiện hoặc Chụp sự kiện?
Có hai cách lan truyền sự kiện trong HTML DOM, 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 bạn 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 "nhấp chuột" của phần tử nào sẽ được xử lý đầu tiên?
Trong quá trình sôi , 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 nắm bắt , sự kiện của phần tử bên ngoài nhất được xử lý đầu tiên 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 (), bạn có thể chỉ định kiểu truyền bằng cách sử dụng tham số "useCapture":
addEventListener(event, function, useCapture);
Giá trị mặc định là false, giá trị này sẽ sử dụng sự lan truyền sôi nổi, khi giá trị được đặt thành true, sự kiện sẽ sử dụng sự lan truyền bắt giữ.
Thí dụ
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Phương thức removeEventListener ()
Phương removeEventListener()thức loại bỏ các trình xử lý sự kiện đã được đính kèm với phương thức addEventListener ():
Thí dụ
element.removeEventListener("mousemove", myFunction);
Tham chiếu đối tượng sự kiện HTML DOM
Để có 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 của chúng tôi .