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;