JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件
2017-08-21 11:15
776 查看
首先,先介绍一下事件冒泡和事件捕获。
浏览器中对事件的处理机制默认为事件冒泡,例如
绑定click事件:
而IE中只有事件冒泡,且没有addEventListener事件,取而代之的是attachEvent。
但是有时候,我们不喜欢出现事件冒泡或者捕获,希望单击div3时,只弹出div3。这时就要用到下面阻止事件冒泡的方法。
1. 阻止冒泡事件
主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上,在事件传播的任何阶段都能使用。使用方法如下(兼容IE):
2. 阻止默认事件
像submit这类的表单元素,都会绑定默认事件,如果不阻止默认事件,则绑定的其他方法也会无效。使用方法如下(兼容IE):
浏览器中对事件的处理机制默认为事件冒泡,例如
<div id='div1'> <div id='div2'> <div id='div3'></div> </div> </div>
#div1{ width: 500px;height: 500px; background: rgb(12,42,31); } #div2{ width: 450px;height: 450px; background: rgb(212,142,1); } #div3{ width: 350px;height: 350px; background: rgb(1,242,153); }
绑定click事件:
div1.onclick=function(){ alert("div1") } div2.onclick=function(){ alert("div2") } div3.onclick=function(){ alert("div3") }此时,当单击中间的div3时,先后弹出div3, div2, div1,此为事件冒泡的过程。利用addEventListener可以设置事件处理机制为捕获还是冒泡:
div1.addEventListener('click',function(obj){ alert("div1") },true);//如果未false则为事件冒泡,不填的话,默认false div2.addEventListener('click',function(obj){ alert("div2") },true); div3.addEventListener('click',function(obj){ alert("div3") },true);这里将第三个参数设为true,指定事件处理机制为事件捕获。此时再次单击div3时,会依次弹出div1, div2, div3,与之前的相反。
而IE中只有事件冒泡,且没有addEventListener事件,取而代之的是attachEvent。
但是有时候,我们不喜欢出现事件冒泡或者捕获,希望单击div3时,只弹出div3。这时就要用到下面阻止事件冒泡的方法。
1. 阻止冒泡事件
主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上,在事件传播的任何阶段都能使用。使用方法如下(兼容IE):
function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); }
2. 阻止默认事件
像submit这类的表单元素,都会绑定默认事件,如果不阻止默认事件,则绑定的其他方法也会无效。使用方法如下(兼容IE):
function stopDefaultEvent(event){ if(window.event){//兼容IE window.event.returnValue=false; }else{ event.preventDefault() } return false; }
相关文章推荐
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之:事件冒泡, 事件捕获 ,默认事件阻止
- javascript如何阻止事件冒泡和默认行为
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- jquery 事件冒泡的介绍以及如何阻止事件冒泡、浏览器默认行为
- javascript 停止事件冒泡以及阻止默认事件冒泡
- JavaScript 事件监听, 事件冒泡, 事件捕获, 阻止默认的事件
- JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡
- JavaScript事件冒泡、事件捕获和阻止默认事件
- JavaScript事件冒泡、事件捕获和阻止默认事件
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- JavaScript之事件的处理模型---事件冒泡,捕获及取消冒泡,阻止默认事件
- JavaScript停止冒泡事件和阻止默认事件
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- Jquery 事件冒泡 以及阻止默认事件
- 事件冒泡和事件捕获以及默认事件
- Js学习笔记-事件冒泡、事件捕获、阻止默认行为
- javascript阻止事件冒泡和浏览器的默认行为
- javascript 绑定事件 阻止冒泡和默认事件
- Javascript的事件冒泡和事件捕获,阻止事件冒泡,事件源target