阻止事件冒泡、捕获的方法:e.stopPropagation();
阻止默认事件发生的方法:e.preventDefault();
默认事件就是就是浏览器自带的,不是我们写的方法,比如,你滑动浏览器滚动条的时候,页面会向下滚动!这是就是默认事件!
------------------------------------------------------------------------------------------------------------------------------------
先看这个事件监听的写法:obj.addEventListener(event,fn,useCapture)
obj : 触发事件对象
event:事件名
fn : 执行函数
useCapture:事件类型。 false表示:冒泡。true表示:捕获 默认情况是false
-------------------------------------------------------------------------------------------------------------------------------------
实例:
body中:
<div id="a">
<div id="b"></div>
</div>
写上js:
<span style="font-family:Microsoft YaHei;font-size:14px;"> <script>
window.οnlοad=function(){
a.addEventListener('click',function(e){
alert("你点击了a");
}) ;
b.addEventListener('click',function(e){
alert("你点击了b");
}) ;
document.addEventListener('click',function(e){
alert("你点击了document")
}) ;
}
</script></span>
上面的DIV结构是(按层次):document包含a,a包含b。即:document->a->b
此时我们点击最里面的b。页面会弹出 ‘你点击了b’ 然后再弹出 ‘你点击了a’ 然后还会弹出 ‘你点击了document ’
就是这是事件冒泡。
事件从最里层开始向外触发。
------------------------------------------------------------------------------------------------------------------------------------
阻止方式:e.stopPropagation();
对b事件进行修改:
<span style="font-family:Microsoft YaHei;">b.addEventListener('click',function(e){</span>
<span style="font-family:Microsoft YaHei;"> <span style="color:#ff0000;"> e.stopPropagation();</span>
alert("你点击了b");
}) ;</span>
此行,页面就是只弹出一个 ‘你点击b’。阻止了事件向外传播。
-------------------------------------------------------------------------------------------------------------------------------------
现在看事件捕获。
先将例子改造成事件捕获的形式:就是监听事件函数里多放个参数 true
<span style="font-family:Microsoft YaHei;"> <script>
window.οnlοad=function(){
a.addEventListener('click',function(e){
alert("你点击了a");
},<span style="color:#ff0000;">true</span>) ;
b.addEventListener('click',function(e){
alert("你点击了b");
},<span style="color:#ff0000;">true</span>) ;
document.addEventListener('click',function(e){
alert("你点击了document")
},<span style="color:#ff0000;">true</span>) ;
}
</script></span>
这个时候你再点击b 就会依次出现 ‘你点击了document ’ 然后再弹出 ‘你点击了a’最后是‘你点击了b’
即:事件从外向里传播。
然后阻止事件传播的方法仍是一样的:用e.stopPropagation();
现在我们给a加上e.stopPropagation();
<span style="font-family:Microsoft YaHei;">a.addEventListener('click',function(e){</span>
<span style="font-family:Microsoft YaHei;"><span style="font-size:14px;"> e.</span><span style="font-size:14px;">stopPropagation</span><span style="font-size:14px;">();</span>
alert("你点击了a");
},<span style="color: rgb(255, 0, 0);">true</span>) ;</span>
即行结果:弹出
‘你点击了document ’ 然后弹出‘你点击了a’ 就结束了。
-----------------------------------------------------------------------------------------------------------------------------------
因为最近在学一个效果,弹出层!
1. 就是点击一个按钮
2. 弹出一个DIV弹出层 。
3. 点击DIV弹出层以外的地方,关闭这个DIV。
在第3步这里,当我们在点击DIV以外的地方的时候,body中基本都还有其它的链接等触发事件存在。我们不希望触发这些事件。这个时候就可以将body的点击事件转换为捕获的形式。然后再body e.stopPropagation(); 这样就可以关闭弹出层,又不会触发其它的事件了。
-------------------------------------------------------------------------------------------------------------------------------------
关闭默认事件
在做弹出层的时候,当弹出弹层的时候,我们希望背景body不滚动。
这个时候就会用到 阻止默认事件发生的方法:e.preventDefault();
用法跟e.stopPropagation();一样的。
一时没想到好的例子。下次想到了,再补上!