本文是笔者阅读对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事件处理
事件捕获
Netscape的事件流就是事件捕获,即从document逐级向下传播到目标元素。由于IE低版本浏览器不支持,所以很少使用事件捕获。
详情请查看下文的DOM事件处理
DOM事件处理
DOM节点中有了事件,那我们就需要对事件进行处理,而DOM事件处理分为4个级别:DOM0级事件处理,DOM0级事件处理,DOM2级事件处理和DOM3级事件处理。
其中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");