JavaScript 事件冒泡和事件捕获

最新推荐文章于 2023-05-08 22:30:00 发布

梦想是坚持

最新推荐文章于 2023-05-08 22:30:00 发布

阅读量217

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/wanghongpu9305/article/details/114294006

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

什么是事件

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

什么是事件流

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

事件冒泡事件捕获

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

而Netscape的事件流就是事件捕获，即从document逐级向下传播到目标元素。

由于IE低版本浏览器不支持，所以很少使用事件捕获

后来ECMAScript在DOM2中对事件流进行了进一步规范，DOM2级事件规定的事件流包括三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段

DOM事件处理

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

DOM0：只支持事件冒泡

dom0级事件具有几号的夸浏览器优势，会以最快的速度绑定。

第一种方式是内联模型（行内绑定），将函数名直接作为html标签中属性的属性值。

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

缺点：不符合w3c中关于内容与行为分离的基本规范

第二种方式是脚本模型（动态绑定）,通过在js中选中某个节点，然后给节点添加onclick属性。

直接给onclick赋值一个function

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

缺点：如果添加两个handler，后面一个会覆盖前面一个。（因为是属性赋值）

嵌套的元素事件

<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>

由于事件冒泡：从下往上，依次触发事件。

DOM2

进一步规范之后，有了DOM2级事件处理程序。可以为一个节点添加多个事件处理。

其中定义了两个方法：

1、addEventlistener() 添加时间侦听器

添加的函数不可以重名，否则会被覆盖

2、removerEventListener() 删除事件侦听器

无法删除匿名函数

函数均有3个参数：

1、要处理的事件名

2、事件处理函数

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>

添加多个handler，则按照添加顺序执行。

那么既有冒泡，也有捕获的时候。谁先谁后呢？

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)

// 调换所有顺序
btn1.addEventListener('click',function(){
    console.log('btn1冒泡')
}, false)
btn1.addEventListener('click',function(){
    console.log('btn1捕获')
}, true)

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)

但是最sub的元素会按照添加的顺序来执行。父元素们的捕获和冒泡顺序照旧。

阻止后序事件

有时候我们需要点击事件不再继续传递，我们在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自身
如果添加在btn1,不管添加在哪一个，都会执行完所有的btn1处理。但是不会执行执行父级冒泡的内容。

1.preventDefault:阻止标签默认行为，有些标签有默认行为，例如a标签的跳转链接属性href等。

form中的submi点击默认行为是提交表单，这里并不需要它提交，只需要执行register方法，故阻止为秒。

2. stopPropagation:阻止事件冒泡，点击那个元素，就只响应这个元素，父级就不会响应了

事件委托

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

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

修改前：

<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>

修改后

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

给ul添加事件

target返回触发事件的元素，不一定是绑定事件的元素
currentTarget返回的是绑定事件的元素

总结

冒泡

概念：从子元素向上触发

触发方式：

dom0方式添加时间

1、内联方式：在标签内添加onclick事件

2、dom元素事件属性：document.getElementById('id').onclick = btnclick

dom2方式

1、通过addEventLisenter(或者+false，默认是false)： btn.addEventListener("click",btnClick,false);

2、为啥false是冒泡？可能是因为其他的方式都会产生冒泡，因此addEventLisenter默认是为了捕获而出现的吧，但是捕获的顺序比较特殊，因此false冒泡是默认

阻止方式

btn1是btn的父元素，因此理论上会：子捕获 =》父冒泡

然而，子元素阻止了冒泡：子捕获

btn1.addEventListener('click',function(){ //父
    console.log('btn1冒泡')
}, false)

btn.addEventListener('click',function(ev){ //子
    ev.stopPropagation();
    console.log('btn捕获')
}, true)

捕获

概念：元素从上往下触发

触发方式

dom2方式

通过addEventLisenter+true：btn.addEventListener("click",btnClick,true);

阻止方式

和冒泡一样

event.stopPropagation()：阻止之后发生的所有事件，如果父元素设置了阻止冒泡，那么子元素所有的事件都不会发生。但其实父元素先发生的事件对于子元素来说属于事件捕获。

事件委托

1、某个元素中的每个子元素都需要添加一个事件，但逐个添加太浪费了

处理事件时，可以通过 currentTarget 操作事件绑定元素 =》子元素

2、直接在父元素添加事件

子元素全部不需要添加事件

处理事件时，用target 操作真正触发的元素 =》子元素。因此 currentTarget获取的绑定元素是父元素

currentTarget 和 target

target 是事件触发的真是元素
currentTarget 是事件绑定的元素

https://www.wolai.com/mary/iPeoDYW5mvo2Zazb71cGv9

https://zhuanlan.zhihu.com/p/114276880

梦想是坚持

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 事件冒泡和事件捕获

什么是事件JavaScript和HTML之间的交互是通过事件实现的。事件：就是文档或浏览器窗口发生的一些特定的交互瞬间。监听器（或事件处理程序）：预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）什么是事件流事件流描述的就是从页面中接受事件的顺序。而早起的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Natscape的事件流就是事件捕获。事件冒泡事件捕获I...
复制链接

扫一扫