JavaScript中事件捕获的示例分析
这篇文章主要介绍JavaScript中事件捕获的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司-专业网站定制、快速模板网站建设、高性价比房山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式房山网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖房山地区。费用合理售后完善,十年实体公司更值得信赖。
什么是事件捕获?
当事件发生在 DOM 元素上时,该事件并不完全发生在那个元素上。在捕获阶段,事件从window开始,一直到触发事件的元素。window----> document----> html----> body ---->目标元素
假设有如下的 HTML 结构:
1
对应的 JS 代码:
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'); }); addEvent(parent, 'click', function (e) { console.log('parent'); }); addEvent(grandparent, 'click', function (e) { console.log('grandparent'); }); addEvent(document, 'click', function (e) { console.log('document'); }); addEvent('html', 'click', function (e) { console.log('html'); }) addEvent(window, 'click', function (e) { console.log('window'); })});
addEventListener
方法具有第三个可选参数useCapture
,其默认值为false
,事件将在冒泡阶段中发生,如果为true,则事件将在捕获阶段中发生。如果单击child
元素,它将分别在控制台上打印window
,document
,html
,grandparent
和parent
,这就是事件捕获。
以上是“JavaScript中事件捕获的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
当前标题:JavaScript中事件捕获的示例分析
文章URL:http://hbruida.cn/article/goegph.html