【JS】事件流、事件冒泡、事件捕获、阻止冒泡、事件委托

最新推荐文章于 2024-07-26 11:41:15 发布

阿昊在

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量852

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_48982503/article/details/122514963

版权

javascript 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

一个DOM元素同时绑定冒泡捕获，执行顺序：

事件：

JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。

什么是事件流

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

事件冒泡事件捕获

IE提出的事件流是事件冒泡，即从下至上，从目标触发的元素逐级向上传播，直到window对象。

而Netscape的事件流就是事件捕获，即从document逐级向下传播到目标元素。由于IE低版本浏览器不支持，所以很少使用事件捕获。

后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。

DOM2级事件规定的事件流包括三个阶段： （1）事件捕获阶段（2）处于目标阶段（3）事件冒泡阶段

DOM事件处理

DOM节点中有了事件，那我们就需要对事件进行处理，而DOM事件处理分为4个级别：DOM0级事件处理，DOM1级事件处理，DOM2级事件处理和DOM3级事件处理。

其中DOM1级事件处理标准中并没有定义相关的内容，所以没有所谓的DOM1事件处理；DOM3级事件在DOM2级事件的基础上添加了更多的事件类型。

DOM0

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>

//点击bt1 输出  1   2    3

在点击btn1的时候输出：如上

我们发现最先触发的是最底层 btn1 的事件，最后才是顶层btn3的事件，因此很明显是事件冒泡。DOM0 级只支持冒泡阶段。

DOM2

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

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

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

addEventListener() 方法用于向指定元素添加事件句柄。element.addEventListener(event, function, useCapture)

如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象

其中的 event，必须。字符串，指定事件名。不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

<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扩展到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>

//事件捕获
//点击btn1，输出 3   2   1

这时候看到输出3 2 1，最外层的btn最先触发，因为addEventListener最后一个参数是true，捕获阶段进行处理。

一个DOM元素同时绑定冒泡捕获，执行顺序：

绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照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)

点击btn1，然而在btn2捕获阶段执行后不再继续往下执行。

阻止冒泡方法封装

<script>
var wrap = document.getElementsByTagName('div')[0]
var box = document.getElementsByTagName('div')[1]
var btn = document.getElementsByTagName('div')[2]
function addEvent(el, type, handle, bool) {
// addEventlistener attachEvent
if (el.addEventlistener) { // 非IE 9以上
el.addEventlistener(type, handle, bool)
} else if (el.attachEvent) {
el.attachEvent('on' + type, function () {
handle.call(el) // 改变this 指向；由默认的window变为当前的对象
}, bool)
} else { // 直接给元素对象绑定事件
el['on' + type] = handle
}
}
addEvent(wrap, 'click', function (e) {
console.log('wrap')
wrap.style.background = 'black';
stop(e)
}, false)
addEvent(box, 'click', function (e) {
console.log('box')
box.style.background = 'black'
stop(e)
}, false)
addEvent(btn, 'click', function (e) {
console.log('btn')
btn.style.background = 'black'
stop(e)
}, false)
// 阻止冒泡方法封装
function stop(e){
e = e || window.event
if (e.stopPropagation) {
// 这里的e = 形参e
e.stopPropagation()
} else { // IE9以下
// 这里的 e = window.event
// 阻止默认时间 true阻止；false不阻止
e.cancelBubble = true;
}
}
</script>

Event事件对象的使用

直接通过event来获取
通过函数传参数的形式
还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或event】来代替。

事件委托

什么是事件委托

事件委托/事件代理：事件委托就是利用【事件冒泡】，自己本身做不了这个事，让让上一级来做这个事，只指定一个事件处理程序，就可以管理某一类型的所有事件。

如果有多个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 返回的是绑定事件的元素

事件委托的优点:

提高性能：每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件，所占用的内存空间更少。
动态监听：使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

阿昊在

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS】事件流、事件冒泡、事件捕获、阻止冒泡、事件委托

目录事件：什么是事件流事件冒泡事件捕获DOM事件处理DOM0DOM2一个DOM元素同时绑定冒泡捕获，执行顺序：阻止冒泡阻止冒泡方法封装Event事件对象的使用事件委托什么是事件委托实现事件委托事件委托的优点:事件：JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。..
复制链接

扫一扫