Thuật ngữ
Từ quirksmode.org :
Chụp sự kiện
Khi bạn sử dụng chụp sự kiện
| |
--------------- | | -----------------
| phần tử1 | | |
| ----------- | | ----------- |
| | phần tử2 \ / | |
| ------------------------- |
| Sự kiện CAPTURING |
-----------------------------------
trình xử lý sự kiện của Element1 kích hoạt trước, trình xử lý sự kiện của Element2 kích hoạt trước.
Sự kiện sủi bọt
Khi bạn sử dụng bong bóng sự kiện
/ \
--------------- | | -----------------
| phần tử1 | | |
| ----------- | | ----------- |
| | phần tử2 | | | |
| ------------------------- |
| Sự kiện BUBBLING |
-----------------------------------
trình xử lý sự kiện của Element2 kích hoạt trước, trình xử lý sự kiện của Element1 kích hoạt trước.
Bất kỳ sự kiện nào diễn ra trong mô hình sự kiện W3C trước tiên được ghi lại cho đến khi nó đạt đến phần tử đích và sau đó lại nổi bong bóng .
| | / \
----------------- | | - | | -----------------
| phần tử1 | | | | |
| ------------- | | - | | ----------- |
| | phần tử2 \ / | | | |
| -------------------------------- |
| Mô hình sự kiện W3C |
------------------------------------------
Giao diện
Từ w3.org , để chụp sự kiện :
Nếu việc chụp EventListenermong muốn ngăn không cho xử lý thêm sự kiện xảy ra, nó có thể gọi stopPropagationphương thức của
Eventgiao diện. Điều này sẽ ngăn việc gửi thêm sự kiện, mặc dù EventListenersđăng ký bổ sung ở cùng cấp thứ bậc sẽ vẫn nhận được sự kiện. Khi stopPropagation
phương thức của một sự kiện đã được gọi, các cuộc gọi tiếp theo đến phương thức đó không có hiệu lực bổ sung. Nếu không có người bắt giữ bổ sung tồn tại và
stopPropagationchưa được gọi, sự kiện sẽ kích hoạt sự phù hợp EventListenerstrên chính mục tiêu.
Đối với bong bóng sự kiện :
Bất kỳ trình xử lý sự kiện nào cũng có thể chọn để ngăn chặn sự lan truyền sự kiện hơn nữa bằng cách gọi stopPropagationphương thức của Eventgiao diện. Nếu bất kỳ
EventListenergọi phương thức này, tất cả bổ sung EventListenerstrên hiện tại EventTargetsẽ được kích hoạt nhưng bong bóng sẽ chấm dứt ở mức đó. Chỉ một cuộc gọi đến stopPropagationlà cần thiết để ngăn chặn sự sủi bọt hơn nữa.
Đối với hủy bỏ sự kiện :
Hủy được thực hiện bằng cách gọi Eventcủa preventDefault
phương pháp. Nếu một hoặc nhiều EventListenerscuộc gọi preventDefaulttrong bất kỳ giai đoạn nào của luồng sự kiện, hành động mặc định sẽ bị hủy.
Ví dụ
Trong các ví dụ sau, nhấp chuột vào siêu liên kết trong trình duyệt web sẽ kích hoạt luồng của sự kiện (trình lắng nghe sự kiện được thực thi) và hành động mặc định của mục tiêu sự kiện (một tab mới được mở).
HTML:
<div id="a">
<a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>
JavaScript:
var el = document.getElementById("c");
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);
Ví dụ 1 : kết quả là đầu ra
DIV event capture
A event capture
A event bubbling
DIV event bubbling
Ví dụ 2 : thêm stopPropagation()vào hàm
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.stopPropagation();
}
kết quả trong đầu ra
DIV event capture
Người nghe sự kiện đã ngăn chặn sự truyền bá đi xuống và đi lên của sự kiện. Tuy nhiên, nó không ngăn được hành động mặc định (mở tab mới).
Ví dụ 3 : thêm stopPropagation()vào hàm
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
ev.stopPropagation();
}
hoặc chức năng
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
ev.stopPropagation();
}
kết quả trong đầu ra
DIV event capture
A event capture
A event bubbling
Điều này là do cả hai người nghe sự kiện được đăng ký trên cùng một mục tiêu sự kiện. Những người nghe sự kiện đã ngăn chặn sự truyền bá đi lên của sự kiện. Tuy nhiên, họ không ngăn hành động mặc định (mở tab mới).
Ví dụ 4 : thêm preventDefault()vào bất kỳ chức năng nào, ví dụ
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.preventDefault();
}
ngăn một tab mới mở.
event.stopchức năng của chúng ... Thật kỳ lạ tôi chưa bao giờ gặp rắc rối với điều đó. Tôi sử dụng bong bóng rất nhiều. Cảm ơn ví dụ!