深入理解JavaScript事件捕获,阻止

向右看齐 2022-08-22 12:21 160阅读 0赞

接上篇，既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。

来看代码：

![复制代码][copycode.gif]

$input.addEventListener("click", function(){
        this.style.border = "5px solid red";
        alert("red")
    }, true)
    $div.addEventListener("click", function(){
        this.style.border = "5px solid green";
        alert("green")
    }, true)
    $body.addEventListener("click", function(){
        this.style.border = "5px solid yellow";
        alert("yellow")
    }, true)

![复制代码][copycode.gif]

这个时候依次弹出”yellow“,"green","red"。

这就是事件的捕获。

如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,"green","yellow"。

阻止默认事件：

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。

如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法。

先上代码

![复制代码][copycode.gif]

1 var $a = document.getElementsByTagName("a")[0];
    2 $a.onclick = function(e){
    3     alert("跳转动作被我阻止了")
    4     e.preventDefault();
    5     //return false;//也可以
    6 }
    
    <a href="http://www.baidu.com">baidu</a>

![复制代码][copycode.gif]

默认事件没有了。

既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。

仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

注意：以上都是基于W3C标准，没有考虑到IE的不同实现。

[copycode.gif]: /images/20220722/2816d5850d9140b2b10de3e92ce8c9d5.png