初学者 我们用的很多都是 dom0级别事件 常见的如下
dom.οnclick=function(){ //dom指的是 常用的一种dom元素 如： div p Button，a等等
}
但是这个在工作中是很忌讳使用的 因为dom0级事件 在后面如果在定义一个的话 就会把之前的覆盖掉
就像是一个全局变量在多人开发的时候限制很大的
所以工作中常用的是 dom2级别事件 addEventListener
addEventListener(dom,fn,false/true) // dom =》dom 元素 fn绑定的回调函数 true/false 使我们今天要讲的
第三个参数 是可选的 一般情况下 你可以不写 默认是false 而大多数情况下 我们也确实会选择false
false 是指事件是冒泡传递的 这样讲可能有点晦涩 我们还是直接上代码
<div id="parent">
<div id="child">
</div>
</div>
//冒泡传递 dom2级别事件
parent.addEventListener('click',function(){
alert('弹出父亲对话框!')
},false)
//冒泡传递 dom2级别事件
child.addEventListener('click',function(e){
e.stopPropagation();
alert('弹出儿子对话框!')
},false)
什么冒泡 通俗点讲 就是由内向外 依次触发事件 我们看到 父元素身上也有一个点击事件
你在点击 child的时候 也会在屏幕上弹出 父亲种的事件 这就是冒泡 想要阻止冒泡就是儿子事件函数中有一个事件对象
调用 e.stopPropagation() 就可以阻止 冒泡了 我们工作中 经常用到就是false的情况
2.为true 我就不再这里详细讲解了 就是冒泡的反向情况 是捕获阶段依次触发事件 就是 从外到内 依次触发
先触发父亲上的事件 后触发 儿子上的事件 不过这里需要注意了 父亲上也得改成true
要不是还是上面的那种情况 这样想想 儿子是从外到内 父亲是从内到外 这样肯定矛盾了 但父元素要不怎么是父亲了 是以外面大的为主
parent.addEventListener('click',function(){
alert('弹出父亲对话框!')
},true)
//冒泡传递 dom2级别事件
child.addEventListener('click',function(e){
e.stopPropagation();
alert('弹出儿子对话框!')
},true)
