事件冒泡与事件捕获
2017-03-03 14:43
141 查看
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。 假设一个元素div,它有一个下级元素p。 <div> <p>元素</p> </div> 这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么? 两种模型 以前,Netscape和Microsoft是不同的实现方式。 Netscape中,div先触发,这就叫做事件捕获。 Microsoft中,p先触发,这就叫做事件冒泡。 两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla, Opera 7 和 Konqueror两种都支持,旧版本的Opera's 和 iCab两种都不支持 。 事件捕获 当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。 事件冒泡 当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。 W3C模型 W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。 程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。 ele.addEventListener('click',doSomething2,true) true=捕获 false=冒泡 传统绑定事件方式 在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。 ele.onclick = doSomething2 IE浏览器 如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。 ele.attachEvent("onclick", doSomething2); 附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。 事件的传播是可以阻止的: • 在W3c中,使用stopPropagation()方法 • 在IE下设置cancelBubble = true; 在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~ 3.阻止事件的默认行为,例如click <a>后的跳转~ • 在W3c中,使用preventDefault()方法; • 在IE下设置window.event.returnValue = false;
相关文章推荐
- 事件冒泡/捕获
- js中的事件冒泡与事件捕获
- Android 事件冒泡及捕获
- js之事件冒泡和事件捕获详细介绍
- 事件的三个阶段:捕获阶段 目标阶段 冒泡阶段
- 事件冒泡,捕获,阻止行为.
- js之事件冒泡和事件捕获详细介绍
- Javascript事件模型:事件捕获和事件冒泡
- js冒泡事件和事件捕获
- W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。
- 面试题-冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
- javacript事件小计(冒泡和捕获)
- js中关于事件捕获与事件冒泡的小实验
- JS事件冒泡和事件捕获详解
- JS事件捕获与事件冒泡
- 了解事件冒泡和事件捕获
- javascript事件冒泡和捕获
- js 中的事件冒泡或事件捕获
- js的事件捕获和事件冒泡学习心得
- 事件冒泡和事件捕获