事件捕获和事件冒泡
2015-05-12 21:14
751 查看
DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序
DOM事件流:
捕获型事件
当你使用捕获型事件时
| | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | -----------------------------------
:元素1的事件处理函数首先被触发,元素2的事件处理函数最后被触发
冒泡型事件
当你使用冒泡型事件时
/ \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | -----------------------------------
:元素2 的处理函数首先被触发,元素1其次
W3C 模型
W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段
| | / \ -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |----------- | | |element2 \ / | | | | | -------------------------------- | | W3C event model | ------------------------------------------
作为一个web开发者,你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数,这是通过addEventListener()方法实现的,如果这个函数的最后一个参数是true,则在捕获阶段绑定函数,反之false,在冒泡阶段绑定函数。
浏览器兼容写法: function bind(obj, evname, fn) { /*由于IE8以及更早版本只支持事件冒泡,所以不需要第三个参数*/ if (obj.attachEvent) { obj.attachEvent('on' + evname, function () { fn.call(obj) /*在使用attachEvent方法的情况下,事件处理程序会在全局作用域中运行,因此this指向window,所以需要修改this指向为当前对象*/ } ) } else { obj.addEventListener(evname, fn, false) } } 1.阻止事件冒泡&默认事件: • 在W3c中,使用stopPropagation()方法 • 在IE下设置cancelBubble = true; 在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~ 2.阻止事件的默认行为,例如click <a>后的跳转~ • 在W3c中,使用preventDefault()方法; • 在IE下设置window.event.returnValue = false;
相关文章推荐
- js事件捕获和冒泡解析
- 事件冒泡与事件捕获
- 彻底弄懂JS的事件冒泡和事件捕获
- 理解事件捕获和事件冒泡
- javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- JavaScript事件流(冒泡事件与捕获事件)
- js事件冒泡、捕获的理解(结合vue)
- javascript事件冒泡与捕获
- js之事件冒泡和事件捕获
- js 事件冒泡和事件捕获
- 事件冒泡、事件捕获与事件委托
- 事件捕获_事件冒泡
- JavaScript事件流之事件冒泡,事件捕获
- js中的事件冒泡与事件捕获
- 彻底弄懂JS的事件冒泡和事件捕获
- JavaScript 事件冒泡 捕获
- JS事件捕获与冒泡
- javascript dom 事件的冒泡和捕获顺序
- 关于DOM2级事件的事件捕获和事件冒泡
- 浅谈javascript中的事件冒泡和事件捕获