字数
838 字
阅读时间
4 分钟
#Blog
事件流
在 DOM 事件流过程中，元素的事件响应是从顶层的 window 开始流向目标元素，再从目标元素流回顶层元素
这个过程中，从上至下就是事件的捕获机制，从下至上就是事件的冒泡机制，可以为元素添加 addListener 来监听事件在流向过程中的实时状态
事件代理/事件委托
事件代理 则是通过事件冒泡或者事件捕获绑定最外层元素来实现对一系列子元素的代理
- DOM 事件流有 3 个阶段：捕获阶段，目标阶段，冒泡阶段；三个阶段的顺序为：捕获阶段——目标阶段——冒泡阶段；
- 对于非目标阶段的元素，事件响应执行顺序遵循先捕获后冒泡的原则；通过暂缓执行捕获事件，可以达到先冒泡后捕获的效果；
- 对于目标元素，事件响应执行顺序根据的事件的执行顺序执行；
- 事件捕获是从顶层的 Window 逐层向内执行，事件冒泡则相反；
- 事件委托（事件代理）是根据事件冒泡或事件捕获的机制来实现的
特点
- 作用：减少操作 DOM 的次数，提高程序的性能
- 动态新创建的子元素，也拥有事件
js 代码的执行时机
注意： js 代码中只能执行捕获或者冒泡的其中一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type、listener、useCapture) 第三个参数如果是
true，表示在事件捕获阶段调用事件处理程序，如果是false（不写默认是 false) 则表示的是事件冒泡阶段调用事件处理程序。 - 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
- 有些事件是没有事件冒泡的，比如
blur、focus、mouseenter、mouseleave - 如何阻止事件冒泡
阻止默认行为
阻止默认行为 例如 表单的提交会跳转页面，a 标签被单击后，默认会进行页面跳转
addEventListener() 注册事件 ，只有
一种阻止默认行为的方式 ，e.preventDefault()传统的注册方式 onclick ，有三种注册方式（preventDefault()，returnValue，return false;)
javascript<a href="http://www.baidu.com">百度</a> <script> // 2. 阻止默认行为 让链接不跳转 只有一种阻止默认行为的方式 var a = document.querySelector('a'); a.addEventListener('click', function(e) { e.preventDefault(); // dom 标准写法 }); // 3. 传统的注册方式 a.onclick = function(e) { // 普通浏览器 e.preventDefault(); 方法 e.preventDefault(); // 低版本浏览器 ie678 returnValue 属性 e.returnValue = false; // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 return false; //特点是return后面的代码不会执行 } </script> 复制代码
阻止冒泡
- e.stopPropagation( ) //有兼容性，只支持高版本的浏览器
- e. cancelBubble=true; // 只支持 IE6-8， 低版本浏览器
参考
贡献者
jiechen