JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件

叁歲伎倆 2022-06-10 13:53 589阅读 0赞

首先，先介绍一下事件冒泡和事件捕获。

浏览器中对事件的处理机制默认为事件冒泡，例如

  1. <div id='div1'>
  2.   <div id='div2'>
  3.     <div id='div3'></div>
  4.   </div>
  5. </div>
  7. #div1{
  8.     width: 500px;height: 500px;
  9.     background: rgb(12,42,31);
  10. }
  11. #div2{
  12.     width: 450px;height: 450px;
  13.     background: rgb(212,142,1);
  14. }
  15. #div3{
  16.     width: 350px;height: 350px;
  17.     background: rgb(1,242,153);
  18. }

Center
绑定click事件：

  1. div1.οnclick=function(){
  2.     alert("div1")
  3. }
  4. div2.οnclick=function(){
  5.     alert("div2")
  6. }
  7. div3.οnclick=function(){
  8.     alert("div3")
  9. }

此时，当单击中间的div3时，先后弹出div3, div2, div1，此为事件冒泡的过程。利用addEventListener可以设置事件处理机制为捕获还是冒泡：

  1. div1.addEventListener('click',function(obj){
  2.     alert("div1")
  3. },true);//如果未false则为事件冒泡，不填的话，默认false
  4. div2.addEventListener('click',function(obj){
  5.     alert("div2")
  6. },true);
  7. div3.addEventListener('click',function(obj){
  8.     alert("div3")
  9. },true);

这里将第三个参数设为true，指定事件处理机制为事件捕获。此时再次单击div3时，会依次弹出div1, div2, div3，与之前的相反。

而IE中只有事件冒泡，且没有addEventListener事件，取而代之的是attachEvent。

但是有时候，我们不喜欢出现事件冒泡或者捕获，希望单击div3时，只弹出div3。这时就要用到下面阻止事件冒泡的方法。

1. 阻止冒泡事件

主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上，在事件传播的任何阶段都能使用。使用方法如下（兼容IE）：

  1. function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); }

2. 阻止默认事件

像submit这类的表单元素，都会绑定默认事件，如果不阻止默认事件，则绑定的其他方法也会无效。使用方法如下（兼容IE）： 

  1. function stopDefaultEvent(event){ if(window.event){//兼容IE window.event.returnValue=false; }else{ event.preventDefault() } return false; }

发表评论

表情：
评论列表 （有 0 条评论，589人围观）

还没有评论，来说两句吧...

相关阅读