js事件机制----捕获与冒泡机制实例分析
本文实例讲述了js事件机制----捕获与冒泡机制。分享给大家供大家参考，具体如下：
先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现,
语法格式如下:
element.addEventListener(event, function, useCapture)
参数值
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:
|
我们可以看到第三个参数是布尔值, true表示在捕获阶段执行, 而false指在冒泡阶段执行
所以什么是 捕获和冒泡?
捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于window对象中, 因此该单击事件实际发生在该元素, 父元素, document, window对象上, 而事件传播过程就是浏览器决定依次触发哪个对象的事件处理函数的过程.
DOM事件模型将事件传播过程分为两个阶段: 捕获阶段和冒泡阶段
在事件捕获阶段, 事件从最顶级的父元素逐层向内传递,
在冒泡阶段, 事件从事件发生的直接元素 , 逐层向父元素传递
这里举个简单的例子:
点击孙子元素, 给body中的元素都添加点击事件并输出触发事件的对象id:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="父级">
<div id="儿子">
<div id="孙子" style="width:100px; height:100px; background-color:yellow">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var a = document.getElementById('父级'),
b = document.getElementById('儿子'),
c = document.getElementById('孙子');
a.addEventListener("click",show, true);
b.addEventListener("click",show, true);
c.addEventListener("click",show, true);
console.log("前3为捕获,后三个为冒泡");
a.addEventListener("click",show, false);
b.addEventListener("click",show, false);
c.addEventListener("click",show, false);
function show(even){ console.log(this.id); }
</script>
</html>
其中两条孙子输出相同被折叠了, 可以看到前三个是以捕获顺序, 第三个参数为true, 顺序是从父亲到孙子
后三个为false意思是冒泡顺序, 顺序是孙子到父级,即从内到外
实际上捕获和冒泡时最外层和的元素并不是父级div,
捕获时实际上是:
document-->html-->body-->父级div-->儿子div-->孙子div
冒泡时相反, 只不过body及以上没添加事件并输出, 所以在例子中没显现出来
所以用冒泡还是捕获？
对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了ECMAScript的 6 种简单数据类型，ECMAScript的数据类型很灵活，一种数据类型可以当作多种数据类型来使用，具体使用详情文章详细介绍需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了js弹出对话框方式,结合大量实例总结分析了JavaScript常用的弹出对话框的实现技巧与相关函数的具体使用方法,需要的朋友可以参考下2015-11-11
JS中改变this指向的方法(call和apply、bind)
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象，通过本文给大家介绍JS中改变this指向的方法(call和apply、bind)，需要的朋友参考下2016-03-03
闭包就是能够读取其他函数内部变量的函数.这篇文章通过实例代码给大家介绍了javascript闭包的使用之按钮切换功能，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要为大家详细介绍了JS实现网页导航条特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。这篇文章主要介绍了webpack源码之compile流程-入口函数run,需要的朋友可以参考下2017-12-12
javascript嵌套函数和在函数内调用外部函数的区别分析
这篇文章主要介绍了javascript嵌套函数和在函数内调用外部函数的区别,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了Bootstrap table列上下移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
今天小编就为大家分享一篇原生JS实现DOM加载完成马上执行JS代码的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
当页面上存在一个图片元素时如：<img src='xxxx' alt="" />,页面加载中ie7、8跟chrome下图片的onload事件非常奇怪，有后完全不触发，有时候触发后进行改变某些元素的操作，操作结果无效。2011-07-07
最新评论