Ghi lại sự kiện
Chụp sự kiện là sự kiện bắt đầu từ phần tử trên cùng đến phần tử đích. Nó ngược lại với Sự kiện sủi bọt , bắt đầu từ phần tử đích đến phần tử trên cùng.
Xây dựng mã
Trong đoạn mã sau, trong phần nội dung, ba phần tử div được sử dụng và một kiểu được áp dụng để làm cho chúng lồng vào nhau.
- Thêm trình xử lý sự kiện vào từng thẻ div bằng cách sử dụng addEventListener ().
- Đảm bảo rằng sự kiện ở đây là " nhấp "sự kiện.
- addEventListener () phương thức chấp nhận 3 tham số.
a) Sự kiện nó sẽ truy cập, đây là sự kiện nhấp chuột.
b) Một hàm xử lý sự kiện để hiển thị thông báo cảnh báo.
c) Tham số thứ ba được gọi là pha. Trong thông số này nếu chúng ta giữ đúng thì thu thập sự kiện sẽ được bật. Nếu chúng tôi tiếp tục false thì sự kiện sẽ nổi lên sẽ được kích hoạt.
- Hàm xử lý sự kiện , được sử dụng để hiển thị các hộp cảnh báo, sẽ sử dụng getAttribute () để nhận giá trị id của phần tử div được nhấp vào.
- Khi chúng tôi nhấp vào thẻ lồng nhau nhất bên trong div3 , vì tính năng chụp sự kiện được bật ở đây, các thông báo cảnh báo bắt đầu từ div1 trên cùng vào thẻ mục tiêu div3 .
- Khi chúng tôi nhấp vào div2 , sau đó các hộp cảnh báo sẽ hiển thị từ div1 trên cùng đến thẻ mục tiêu div2.
Ví dụ
<html>
<head>
<style>
.divstyle{
display:table-cell;
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "div1" class="divstyle">
div1
<div id = "div2" class="divstyle">
div2
<div id = "div3" class="divstyle">
div3
<script>
var divs = document.getElementsByTagName("div");
for(var i = 0; i<divs.length; i++){
divs[i].addEventListener("click",clickhandler,true );
}
function clickhandler() {
alert(this.getAttribute("id") + "event got handled");
}
</script>
</body>
</html> Khi thực hiện chương trình trên, chúng ta nhận được hình ảnh sau trên màn hình
Khi nhấp vào div3 ở trên (phần tử mục tiêu) chúng tôi nhận được những điều sau đây làm đầu ra
đầu ra
On clicking ok of the above div1 alert box we get the following div2 alert box opened
On clicking ok of the above div2 alert box we get the following div3 alert box opened.
