什么是事件捕获?
这是一篇协同翻译的文章,你可以点击『我来翻译』按钮来参与翻译。
When an event occurs on a DOM element, that event does not entirely occur on that just one element. In Capturing Phase, the event starts from the window
all the way down to the element that triggered the event.
If we have an example markup like this.
<div class="grandparent">
<div class="parent">
<div class="child">1</div>
</div>
</div>
And our js code.
function addEvent(el, event, callback, isCapture = false) {
if (!el || !event || !callback || typeof callback !== 'function') return;
if (typeof el === 'string') {
el = document.querySelector(el);
};
el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
const grandparent = document.querySelector('.grandparent');
addEvent(child, 'click', function (e) {
console.log('child');
}, true);
addEvent(parent, 'click', function (e) {
console.log('parent');
}, true);
addEvent(grandparent, 'click', function (e) {
console.log('grandparent');
}, true);
addEvent(document, 'click', function (e) {
console.log('document');
}, true);
addEvent('html', 'click', function (e) {
console.log('html');
}, true)
addEvent(window, 'click', function (e) {
console.log('window');
}, true)
});
The addEventListener
method has a third optional parameter useCapture with a default value of false
the event will occur in the Bubbling phase if true
the event will occur in the Capturing Phase. If we click on the child
element it logs window
,document
,html
, grandparent
and parent
and child
respectively on the console. This is Event Capturing.
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: