本文主要介绍JavaScript事件流的相关信息，帮助大家更好的理解和学习JavaScript。感兴趣的朋友可以了解一下。
事件
HTML和javascript的交互是通过事件驱动来实现的，比如鼠标点击事件、页面滚动事件onscroll等。您可以向文档或文档中的元素添加事件侦听器来订阅事件。如果你想知道这些事件何时被调用，你需要知道“事件流”的概念。
事件流
事件描述从页面接收事件的顺序。但是早期的IE和网景提出了完全相反的事件流概念。IE事件流是事件冒泡，网景事件流是事件捕获。
事件流类别
事件冒泡
即自下而上，目标触发的元素一步步向上传播，直到窗口对象。
事件捕获
即自上而下，从文档到目标元素一步步进行。
后来ECMAScript进一步规范了DOM2中的事件流，基本上是以上两者的结合。
由DOM2二级事件指定的事件流包括三个阶段：
事件捕获阶段
处于目标阶段
事件冒泡阶段
注意：先捕获再冒泡，但是在目标节点上，谁写在前面谁就先执行。但是，在目标元素上冒泡和捕获是没有区别的，并且是按照绑定的顺序执行的。
DOM事件级别
有四个级别。
0: DOM0不是W3C规范。
DOM1:从W3C规范开始。重点是HTML文档和XML文档。
2.DOM2 1增加了一个样式表对象模型。
M3:在DOM3中增加了内容模型(DTD，Schemas)和文档验证。
DOM0级别0
DOM0 level 0事件有极好的跨浏览器优势，会尽快绑定。有以下两种绑定方法
内联绑定(内联模型)
将函数名直接用作html标记中属性的属性值。
Div onclick='btnClick()'按钮/div
脚本
函数btnClick(){
console . log(' hello ')；
}
/脚本
动态绑定(脚本模型)
在JS中选择一个节点，然后向该节点添加onclick属性。
Div=' BTN '按钮/div
脚本
var BTN=document . getelementbyid(' BTN ')；
btn.onclick=function(){
console . log(' click ')；
}
/脚本
注意
在DOM0 level 0的同一个节点上只能添加一个同类型的事件，后面添加的同类型事件会覆盖前面的事件。
DOM0级别0仅支持冒泡。
DOM1级
DOM1级事件处理标准中没有定义事件相关的内容，所以不存在所谓的DOM1事件处理。
DOM2级
DOM2级别2定义了两个事件处理程序。(观察者模式)
AddEventListener() -添加一个事件侦听器
RemoveEventListener() -删除事件侦听器。
该函数有三个参数，第一个参数是要处理的事件的名称，第二个参数是事件处理程序的函数，第三个参数是一个布尔值。默认情况下false表示使用冒泡机制，true表示捕获机制。
Div=' BTN '按钮/div
脚本
var BTN=document . getelementbyid(' BTN ')；
btn.addEventListener('click '，hello，false)；
btn.addEventListener('click '，helloagain，false)；
函数hello(){
console . log(' hello ')；
}
函数helloagain(){
console.log('又见面了')；
}
/脚本
//点击结果：
//你好
//又见面了
注意
如果定义了相同的监控方法，它将被覆盖。
Div=' BTN '点击/div
脚本
var BTN=document . getelementbyid(' BTN ')；
btn.addEventListener('click '，hello，false)；
btn.addEventListener('click '，hello，false)；
函数hello(){
console . log(' hello ')；
}
/脚本
//点击结果：
//你好
DOM3类
向DOM2添加了内容模型(DTD、模式)和文档验证。定义了一些新的事件，比如键盘事件，也可以自定义事件。
自定义事件
自定义事件不是由DOM本身触发的，其目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent('CustomEvent ')创建；返回的对象有一个initCustomEvent()方法，该方法接收以下四个参数。
类型：字符串、触发事件类型、自定义。例如“keyDown”、“selected change”；
Bubble(布尔值):指示事件是否应该冒泡；
Cancelable(布尔值):指示事件是否可以取消；
Detail (object):任意值，保存在事件对象的Detail属性中；
您可以像分配其他事件一样，在DOM中分配创建的自定义事件对象。比如：
var div=document . getelementbyid(' my div ')；
EventUtil.addEventHandler(div，' myEvent '，function () {
alert('div myEvent！');
});
event util . add eventhandler(document，' myEvent '，function(){
alert('记录我的事件！');
});
if(document . implementation . has feature(' custom events '，' 3.0 '){
var e=document . create event(' CustomEvent ')；
e.initCustomEvent('myEvent '，true，false，' hello world！');
div . dispatch event(e)；
}
在本例中，创建了一个冒泡事件“myEvent”。并将event.detail的值设置为一个简单的字符串，然后监听div和document上的事件，因为initCustomEvent中设置了事件冒泡。因此，当div触发事件时，浏览器会将事件冒泡到文档中。
阻止冒泡
停止传播功能
btn.addEventListener('click '，function(ev){
ev . stop propagation()；
Console.log('停止冒泡')
}，假)
事件委托(事件代理)
原理
如果有多个DOM节点需要监控事件，那么给每个DOM绑定一个monitor函数会极大地影响页面的性能，因为我们是通过事件委托来优化的，事件委托就是利用冒泡的原理。
保险商实验所
li1/李
li2/李
李/李
li4/李
li5/李
/ul
脚本
var Li _ list=document . getelementsbytagname(' Li ')
for(设索引=0；indexli _ list.length索引){
Li _ list[索引]。addEventListener('click '，函数(ev){
console . log(ev . current target . innerhtml)
})
}
/脚本
正常情况下，我们会为每一个li绑定一个事件，但如果此时动态渲染li，数据量极大，则需要在每次渲染后重新绑定(有新的情况)，既繁琐又耗费性能；此时，我们可以将绑定事件委托给li的父元素，即ul。
var ul _ DOM=document . getelementsbytagname(' ul ')
ul_dom[0]。addEventListener('click '，函数(ev){
console . log(ev . target . innerhtml)
})
目标和当前目标之间的差异：
Target返回触发事件的元素，不一定是绑定事件的元素。
CurrentTarget返回绑定事件的元素。
优点
提高性能：每个函数都占用内存空间。只需添加一个事件处理程序代理所有事件，占用内存空间更少。
动态监控：使用事件委托可以自动绑定动态添加的元素，即新添加的节点可以拥有与其他元素相同的事件，而无需主动添加。
以上是JavaScript事件流的详细内容。关于JavaScript事件流的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。