JavaScript事件流,事件冒泡和事件捕捉

本文是笔者阅读对JS事件流的深入理解之后的学习记录,@谢小飞系原文作者,感谢!

什么是js事件?什么是原生事件和自定义事件?

在JavaScript中有一个Event接口,表示在DOM中出现的事件,一些事件是由用户触发的,例如鼠标或键盘事件;而其他事件常由 API 生成,例如指示动画已经完成运行的事件,视频已被暂停等等。事件也可以通过脚本代码触发,例如对元素调用 HTMLElement.click() 方法,或者定义一些自定义事件,再使用 EventTarget.dispatchEvent() 方法将自定义事件派发往指定的目标(target)。
原生事件(DOM事件):
原生事件由浏览器的监听器根据原生dom节点对象的状态是否改变来判断是否触发,也可以根据需要手动触发。

<button @click="change">点我</button>

这里的click就是一个鼠标事件(MouseEvent)
自定义事件:
自定义事件句柄指向的操作函数,此事件不在浏览器的监听范围内,换句话说,浏览器的监听器无视自定义事件,所以它的触发完全靠程序员根据需要手动触发。

<my-component @click="myalert">my component</my-component>
        Vue.component('my-component',{
            props:["value"],
            template:`
              <div>
              <slot></slot>
              </div>
            `
        })
myalert:function (){
     alert('myalert')
 }

而这里的click就是一个自定义事件,为什么?
因为my-component是我们自定义的组件,并不是原生元素,此时浏览器会将click认为是我们的自定义事件。
所以,如果我们现在点击my-component,还会触发myalert吗?
并不会,因为my-compenent并没有监听鼠标点击事件,这里监听的只是一个名为click的自定义事件,这个自定义事件需要我们手动触发。

观察以下代码:

        Vue.component('my-component',{
            props:["value"],
            template:`
              <div>
              <button @click="myclick">click here</button>
              <slot></slot>
              </div>
            `,
            methods:{
                myclick(){
                    window.alert('myclick')
                }
            }
        })

这时候点击my-component中的按钮,会触发myclick方法吗?
如何区分这里的<button @click="myclick">click here</button>监听得是自定义事件还是原生事件?button是原生DOM节点,不是我们自定义的,所以,这里监听的click是监听的原生事件,也就是鼠标点击事件。因此,点击button会触发这里的myclick

js事件流

当一个节点触发了一个事件时,比如在某些写内容上的点击,鼠标的滚动等,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程称为DOM事件流。而自定义事件的冒泡Vue官方并没有提供相应的解决方案,我们可以使用emit达到类似的效果。

事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获。

事件冒泡

IE提出的事件流是事件冒泡,即从下至上,从目标触发的元素逐级向上传播,直到window对象。详情请查看下文的DOM事件处理
JavaScript事件流,事件冒泡和事件捕捉

事件捕获

Netscape的事件流就是事件捕获,即从document逐级向下传播到目标元素。由于IE低版本浏览器不支持,所以很少使用事件捕获。
详情请查看下文的DOM事件处理
JavaScript事件流,事件冒泡和事件捕捉

DOM事件处理

DOM节点中有了事件,那我们就需要对事件进行处理,而DOM事件处理分为4个级别:DOM0级事件处理,DOM0级事件处理,DOM2级事件处理和DOM3级事件处理。
JavaScript事件流,事件冒泡和事件捕捉
其中DOM1级事件处理标准中并没有定义相关的内容,所以没有所谓的DOM1事件处理;DOM3级事件在DOM2级事件的基础上添加了更多的事件类型。

1. DOM 0

DOM0级事件具有极好的跨浏览器优势,会以最快的速度绑定。第一种方式是内联模型(行内绑定),将函数名直接作为html标签中属性的属性值。

<div onclick="btnClick()">click</div>
<script>
function btnClick(){
    console.log("hello");
}
</script>

内联模型的缺点是不符合w3c中关于内容与行为分离的基本规范。第二种方式是脚本模型(动态绑定),通过在JS中选中某个节点,然后给节点添加onclick属性。

<div id="btn">点击</div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
    console.log("hello");
}
</script>

点击输出hello,没有问题;如果我们给元素添加两个事件

<div id="btn">点击</div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
    console.log("hello");
}
btn.onclick=function(){
    console.log("hello again");
}
</script>

这时候只有输出hello again,很明显,第一个事件函数被第二个事件函数给覆盖掉,所以脚本模型的缺点是同一个节点只能添加一次同类型事件。让我们把div扩展到3个。

<div id="btn3">
    btn3
    <div id="btn2">
        btn2
        <div id="btn1">
            btn1
        </div>
    </div>
</div>
<script>
    let btn1 = document.getElementById("btn1");
    let btn2 = document.getElementById("btn2");
    let btn3 = document.getElementById("btn3");
    btn1.onclick=function(){
        console.log(1)
    }
    btn2.onclick=function(){
        console.log(2)
    }
    btn3.onclick=function(){
        console.log(3)
    }
</script>

JavaScript事件流,事件冒泡和事件捕捉
当我们点击btn3的时候输出3,那当我们点击btn1的时候呢?
JavaScript事件流,事件冒泡和事件捕捉
我们发现最先触发的是最底层btn1的事件,最后才是顶层btn3的事件,因此很明显是事件冒泡。DOM0级只支持冒泡阶段。
JavaScript事件流,事件冒泡和事件捕捉

2. DOM2

进一步规范之后,有了DOM2级事件处理程序,其中定义了两个方法:

  • addEventListener() —添加事件侦听器
  • removeEventListener() —删除事件侦听器

函数均有3个参数, 第一个参数是要处理的事件名 第二个参数是作为事件处理程序的函数 第三个参数是一个boolean值,默认false表示使用冒泡机制,true表示捕获机制。

<div id="btn">点击</div>

<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",hello,false);
btn.addEventListener("click",helloagain,false);
function hello(){
    console.log("hello");
}
function helloagain(){
    console.log("hello again");
}
</script>

这时候两个事件处理程序都能够成功触发,说明可以绑定多个事件处理程序,但是注意,如果定义了一摸一样时监听方法,是会发生覆盖的,即同样的事件和事件流机制下相同方法只会触发一次,

<div id="btn">点击</div>

<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",hello,false);
btn.addEventListener("click",hello,false);
function hello(){
    console.log("hello");
}
</script>

这时候hello只会执行一次;让我们把div扩展到3个。

<div id="btn3">
    btn3
    <div id="btn2">
        btn2
        <div id="btn1">
            btn1
        </div>
    </div>
</div>
<script>
    let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');
    let btn3 = document.getElementById('btn3');
    btn1.addEventListener('click',function(){
        console.log(1)
    }, true)
    btn2.addEventListener('click',function(){
        console.log(2)
    }, true)
    btn3.addEventListener('click',function(){
        console.log(3)
    }, true)
</script>

JavaScript事件流,事件冒泡和事件捕捉
这时候看到顺序和DOM0中的顺序反过来了,最外层的btn最先触发,因为addEventListener最后一个参数是true,捕获阶段进行处理。

JavaScript事件流,事件冒泡和事件捕捉

那么冒泡和捕获阶段谁先执行呢?我们给每个元素分别绑定了冒泡和捕获两个事件。

btn1.addEventListener('click',function(){
    console.log('btn1捕获')
}, true)
btn1.addEventListener('click',function(){
    console.log('btn1冒泡')
}, false)

btn2.addEventListener('click',function(){
    console.log('btn2捕获')
}, true)
btn2.addEventListener('click',function(){
    console.log('btn2冒泡')
}, false)

btn3.addEventListener('click',function(){
    console.log('btn3捕获')
}, true)
btn3.addEventListener('click',function(){
    console.log('btn2冒泡')
}, false)

JavaScript事件流,事件冒泡和事件捕捉
我们看到先执行捕获阶段的处理程序,后执行冒泡阶段的处理程序,我们把顺序换一下再看运行结果:

btn1.addEventListener('click',function(){
    console.log('btn1冒泡')
}, false)
btn1.addEventListener('click',function(){
    console.log('btn1捕获')
}, true)

btn2.addEventListener('click',function(){
    console.log('btn2冒泡')
}, false)
btn2.addEventListener('click',function(){
    console.log('btn2捕获')
}, true)

btn3.addEventListener('click',function(){
    console.log('btn3冒泡')
}, false)
btn3.addEventListener('click',function(){
    console.log('btn3捕获')
}, true)

JavaScript事件流,事件冒泡和事件捕捉
w3c规定了,任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。绑定在被点击元素的事件是按照代码的顺序发生的。

阻止冒泡

有时候我们需要点击事件不再继续向下捕获或者向上冒泡,我们在btn2上加上stopPropagation函数,阻止程序捕获或者冒泡。

btn1.addEventListener('click',function(){
    console.log('btn1冒泡')
}, false)
btn1.addEventListener('click',function(){
    console.log('btn1捕获')
}, true)

btn2.addEventListener('click',function(){
    console.log('btn2冒泡')
}, false)
btn2.addEventListener('click',function(ev){
    ev.stopPropagation();
    console.log('btn2捕获')
}, true)

btn3.addEventListener('click',function(){
    console.log('btn3冒泡')
}, false)
btn3.addEventListener('click',function(e){
    console.log('btn3捕获')
}, true)

JavaScript事件流,事件冒泡和事件捕捉
可以看到btn2捕获阶段执行后不再继续往下执行。
JavaScript事件流,事件冒泡和事件捕捉

btn1.addEventListener('click',function(ev){
        ev.stopPropagation()
        console.log('btn1冒泡')
    }, false)
    btn1.addEventListener('click',function(){
        console.log('btn1捕获')
    }, true)

    btn2.addEventListener('click',function(){
        console.log('btn2冒泡')
    }, false)
    btn2.addEventListener('click',function(){
        console.log('btn2捕获')
    }, true)

    btn3.addEventListener('click',function(){
        console.log('btn3冒泡')
    }, false)
    btn3.addEventListener('click',function(e){
        console.log('btn3捕获')
    }, true)

JavaScript事件流,事件冒泡和事件捕捉
可以看到btn1冒泡阶段执行后不再继续往下执行。

事件委托

如果有多个DOM节点需要监听事件的情况下,给每个DOM绑定监听函数,会极大的影响页面的性能,因为我们通过事件委托来进行优化,事件委托利用的就是冒泡的原理。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var li_list = document.getElementsByTagName('li')
    for(let index = 0;index<li_list.length;index++){
        li_list[index].addEventListener('click', function(ev){
            console.log(ev.currentTarget.innerHTML)
        })
    }
</script>

正常情况我们给每一个li都会绑定一个事件,但是如果这时候li是动态渲染的,数据又特别大的时候,每次渲染后(有新增的情况)我们还需要重新来绑定,又繁琐又耗性能;这时候我们可以将绑定事件委托到li的父级元素,即ul。

var ul_dom = document.getElementsByTagName('ul')
ul_dom[0].addEventListener('click', function(ev){  
    console.log(ev.target.innerHTML)
})

上面代码中我们使用了两种获取目标元素的方式,target和currentTarget,那么他们有什么区别呢:

  • target返回触发事件的元素,不一定是绑定事件的元素
  • currentTarget返回的是绑定事件的元素
    也就是说,在事件委托之后,ev.target可以得到是哪一个li触发了事件。
上一篇:014-jQuery HTML-删除元素


下一篇:[SOJ] shortest path in unweighted graph