js之事件冒泡和事件捕获详细介绍

最新推荐文章于 2022-04-09 20:59:51 发布

maohuihua

最新推荐文章于 2022-04-09 20:59:51 发布

阅读量950

点赞数

本文链接：https://blog.csdn.net/maohuihua/article/details/79715234

版权

preventDefault：

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的。

我们都知道，链接<a>的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转：

//假定有链接<a href="http://www.cnf2e.com/" id="testA" >cnf2e</a>

var a = document.getElementById("testA");

a.onclick =function(event){

event.preventDefault();

}

stopPropagation：

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如：

</ul>

</div>

上面的代码，我们单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。

当我们需要阻止冒泡时，就得使用stopPropagation了,

</ul>

</div>

这时单击”test”，只会提示alert(‘li’);

return false

现在很多js代码都直接使用jQuery来写，在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。但是使用原生js写时，return false只会阻止默认行为。下面两段代码说明

使用原生js方法时，return false只能阻止默认行为，但却不能阻止冒泡

</ul>

</div>

var a = document.getElementById("testB");

a.onclick = function(){

return false;

};

使用jQuery方法时，return false会阻止默认行为，也会阻止冒泡

</ul>

</div>

$("#testC").on('click',function(){

return false;

});

不会弹出alert也不会跳转

问题描述：当点击core的时候，会弹出什么？顺序是怎么样的？
问题例子：

结果：会弹出core->inner->outer

1、Netscape主张父级元素的事件首先发生，这种事件发生顺序被称为捕获型
     微软则保持本元素具有优先权，这种事件顺序被称为冒泡型
     DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

     冒泡型：

1.对于某个节点，触发的一个事件，会首先执行当前这个dom节点绑定的方法

2.执行完毕后，会冒泡至改节点的父节点，执行相应的函数

3. 重复以上过程，直至Dom的根节点。

捕获型

事件捕获的顺序刚好与之相反

　　1.当一个事件发生时，最外层的已绑定该事件的方法会执行

　　2.然后该事件会下降至他的子节点，触发相应的方法

　　3.重复1,2的过程

2、绑定事件：我们通常会用addEventListener

addEventListener("onclick",function(){},false) //第三个参数为false的时候，这个事件就是冒泡型事件，如果不写默认为false，如果写true，这个事件就是捕获型事件

3. stopPropagation()是停止冒泡事件流。

当我们为一个事件绑定的方法中，添加一句stopPropagation,那么该事件的冒泡过程到此为止，其后的所有节点绑定事件都不执行；

4. 没有方法去停止捕获事件流，当然，从功能上看也即没必要，也不合理。

addEventListener和removeEventListener

// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型,true表示事件捕获
addEventListener(type, listener, useCapture);

测试代码:

<script>
    window.onload = function(){
        var outA = document.getElementById("outA");  
        var outB = document.getElementById("outB");  
        var outC = document.getElementById("outC");  
        var outD = document.getElementById("outD");  
        
        // 使用事件冒泡
        outA.addEventListener('click',function(){alert(1);},false);
        outB.addEventListener('click',function(){alert(2);},false);
        outC.addEventListener('click',function(){alert(3);},false);
        outD.addEventListener('click',function(){alert(4);},false);
    };
</script>
<body>
    <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
        <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
            <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">
                <div id="outD" style="height:80px; background:#8f8f8f;top:30px;position:relative;"></div>
            </div> 
        </div>
    </div>
</body>

点击D区域

当是事件捕获时(都是useCapture=true)：
1->2->3->4

事件捕获.gif
当是事件冒泡时(都是useCapture=false):
4->3->2->1

事件冒泡.gif
当AC为true，BD为false时:点击D区域
// 使用事件冒泡
outA.addEventListener('click',function(){alert(1);},true);
outB.addEventListener('click',function(){alert(2);},false);
outC.addEventListener('click',function(){alert(3);},true);
outD.addEventListener('click',function(){alert(4);},false);

1->3->4->2 1和3为事件捕获过程执行，2和4为事件冒泡过程执行。

混合.gif

maohuihua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js之事件冒泡和事件捕获详细介绍

preventDefault：preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接&lt;a&gt;，提交按钮&lt;input type=”submit”&gt;等。当Event对象的cancelable为false时，...
复制链接

扫一扫