冒泡事件：事件由目标元素往外层触发，至document元素（IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象）
捕获事件：事件由外开始接受事件，至目标元素。IE9、Firefox、Chrome和Safari 从window对象开始捕获）
目前DOM事件流将2个阶段合并起来。事件触发由捕获阶段开始，冒泡阶段结束，（目标接受到事件这一阶段被归为冒泡阶段）
添加监听事件函数addEventListener（监听的事件，监听的事件函数，true为捕获阶段，flase为冒泡阶段（布尔值））
默认添加事件一般是添加到冒泡阶段。
！！！addEventListener有一个要注意的点是，想要使用removeEventListener移除监听函数事件的话传入的第二个值不能是匿名函数，如果传入的是匿名函数的话，跟元素之前绑定的匿名函数不是同一个函数
如果还不能理解冒泡和捕获，可以自己实践一下。
<body>
<div>
<ul>
<li>
<span></span>
</li>
</ul>
</div>
<script>
var ul=document.querySelector("ul")
var li=document.querySelector("li")
var div=document.querySelector("div")
ul.addEventListener("click",function(e){
console.log("ul")
},false)
div.addEventListener("click",function(e){
console.log("div")
},false)
ul.οnclick=function(){
console.log("ul事件触发")
}
ul.addEventListener("click",function(e){
console.log("ul捕获")
},true)
li.addEventListener("click",function(e){
console.log("li捕获")
},true)
li.addEventListener("click",function(e){
console.log("li")
},false)
div.addEventListener("click",function(e){
console.log("div捕获")
},true)
li.οnclick=function(){
console.log("li事件触发")
}
</script>
</body>
该代码将输出：
这个输出表明了事件触发的顺序。
也证明浏览器大多数事件触发都在冒泡阶段
其中有个问题要注意：
就是当同一个元素绑定多个事件时他是按顺序触发的。
也就是我在代码中定义了li元素捕获阶段触发事件还有冒泡阶段触发的事件，哪个事件在前面，谁就会先输出。
扫一扫
6228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
