JS事件冒泡与JS事件代理(事件委托)

这篇具有很好参考价值的文章主要介绍了JS事件冒泡与JS事件代理(事件委托)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、事件冒泡

1.1 概念

通俗来讲,当触发(点击或者触摸之类的做法)有父元素的子元素的时候,事件会从事件源(被点击的子元素)开始逐级向上传播,触发父级元素的点击事件,一直会传到window。如果在某一层想要中止冒泡,使用 event.stopPropagation() 。下面见详细的代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #parent {
      width: 400px;
      height: 400px;
      background-color: blue;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #child {
      width: 200px;
      height: 200px;
      background-color: brown;
    }
  </style>

</head>

<body>
  <div id="parent">
    <div id="child"></div>
  </div>

  <script>

    let parent = document.getElementById('parent')
    parent.onclick = function () {
      console.log('parent')
    }

    let child = document.getElementById('child')
    child.onclick = function () {
      console.log('child')
    }

  </script>
</body>

</html>

JS事件冒泡与JS事件代理(事件委托)
我们可以发现,当点击红色区域(子元素)的时候,父级元素的click事件也被触发了。

接下来看两个示例:

1.2 要是不给子元素添加具体的oncilck处理方法,也能冒泡么?

<script>

    // let parent = document.getElementById('parent')
    // parent.onclick = function () {
      // console.log('parent')
    // }

    let child = document.getElementById('child')
    child.onclick = function () {
      console.log('child')
    }

  </script>

效果如下:
JS事件冒泡与JS事件代理(事件委托)
子元素在没有定义具体的click处理函数的时候仍然可以冒泡,触发父级元素的click事件。

1.3 子元素触发的事件冒泡会触发父元素所有的事件么?还是触发对应的事件?

 <script>

    let parent = document.getElementById('parent')
    parent.onkeydown = function () {
      console.log('parent')
    }

    let child = document.getElementById('child')
    child.onclick = function () {
      console.log('child')
    }

  </script>

结果如下:
JS事件冒泡与JS事件代理(事件委托)
我们发现只有相应的事件会发生事件冒泡,不相关的事件不受影响(注意由于click为鼠标的点击,所以同样会触发mousedown与mouseup等相关事件,同时发生冒泡!)

1.4 那么我们应该如何组织这讨厌的事件冒泡机制呢?

很简单,在事件触发时,会传入一个相应的event对象,其中有一个stopPropagation()方法可以阻止事件冒泡(IE中为cancleBubble=true),以下是详细代码:

 <script>
    let parent = document.getElementById('parent')
    parent.onclick = function () {
      console.log('parent')
    }

    let child = document.getElementById('child')
    child.onclick = function (ev) {
      var e = ev || window.event
      // console.log(e)
      console.log('child')
      stopPropagation(e)
    }
    function stopPropagation (e) {
      if (e.stopPropagation) {
        e.stopPropagation()
      } else {
        e.cancelBubble = true
      }
    }
  </script>

结果如下:
JS事件冒泡与JS事件代理(事件委托)
可以通过运行结果来看,事件冒泡成功被阻止了。

看到这里,相信小伙伴们可能会觉得事件冒泡很麻烦,还需要写个事件阻止冒泡行为。但凡事都有双刃剑,事件冒泡同时给我们带来的还有事件委托这一减少DOM操作的神器。

2、事件委托(事件代理)

2.1 概念

事件委托,首先按字面的意思就能看你出来,是将事件交由别人来执行,再联想到上面讲的事件冒泡,是不是想到了?对,就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托:

2.2 for循环遍历给每个li添加事件

在开发的时候可能会遇到这种情况:如给ul下的每个li都加一个事件,你可能会通过遍历来给每个栏目添加事件:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <ul id="parentUl">
    <li>我是子元素</li>
    <li>我是子元素</li>
    <li>我是子元素</li>
  </ul>

  <script>

    var ul = document.getElementById('parentUl'),
      li = ul.getElementsByTagName('li')
    for (var i = 0; i < li.length; i++) {
      li[i].onclick = function () {
        alert(this.innerHTML)
      }
    }
  </script>
</body>

</html>

JS事件冒泡与JS事件代理(事件委托)
这种方式来添加事件固然简单,但是需要多次操作DOM,如果有100、1000个同级的元素需要添加事件,这种方式就不可取了。

2.3 利用事件代理给li添加事件

事件委托是利用事件的冒泡原理来实现的,比如我们平时在给ul中的li添加事件的时候,我们都是通过for循环一个个添加,如果li很多个的话,其实就有点占内存了,这个时候可以用 事件代理来优化性能,

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul id='ulid' onclick='clickFunc()'>
    <li>1个li</li>
    <li>2个li</li>
    <li>3个li</li>
    <li>4个li</li>
    <li>5个li</li>
  </ul>

  <script>
    function clickFunc (ev) {
      var ev = ev || window.event
      console.log(ev)
      var oLi = ev.srcElement || ev.target
      if (oLi.nodeName.toLowerCase() == 'li') {
        alert(oLi.innerText)
      }

    }

  </script>
</body>

</html>

结果如下:
JS事件冒泡与JS事件代理(事件委托)文章来源地址https://www.toymoban.com/news/detail-492520.html

到了这里,关于JS事件冒泡与JS事件代理(事件委托)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)

    前端结构 事件冒泡:clickSonBox事件发生时clickFatherBox事件也被触发了 此时点击子盒子 对话框弹出两次 方法1:使用js阻止事件冒泡 方法2:使用事件修饰符stop 绑定事件时,使用stop修饰符阻止事件冒泡 方法3:使用事件修饰符self 绑定事件时,使用self修饰符 表示只在本元素被点

    2024年02月16日
    浏览(38)
  • 理解C#委托(Delegate)通俗易懂,深入浅出

    委托首先是一个数据类型,我们可以像定义结构体一样定义一个委托类型,委托(Delegate) 是存有对某个方法的引用的一种引用类型变量。引用可在运行时被改变 委托的定义 例如: 在定义委托类型时要指定函数的参数类型和返回值,一旦声明了委托类型,委托对象必须使用

    2024年02月02日
    浏览(52)
  • Vue.js核心概念简介:组件、数据绑定、指令和事件处理

    本文介绍了Vue.js的四个核心概念:组件、数据绑定、指令和事件处理。每个概念都通过一个简单的示例进行了详细的解释。通过学习这些概念,您将能够充分利用Vue.js的强大功能,构建高效、灵活的Web应用程序。 1 组件 组件是Vue.js的核心概念之一,它允许您将UI分解为相互作

    2024年02月04日
    浏览(59)
  • 【C#学习笔记】委托与事件 (从观察者模式看C#的委托与事件)

    转载请注明出处:🔗https://blog.csdn.net/weixin_44013533/article/details/134655722 作者:CSDN@|Ringleader| 主要参考: 委托(C# 编程指南) 事件介绍 C# 中的委托和事件简介 Delegate 类 Exploring the Observer Design Pattern微软技术文章翻译 委托是一种 引用类型 ,表示对具有特定参数列表和返回类型

    2024年02月04日
    浏览(49)
  • Unity---委托与事件

    目录 1.委托和事件在使用上的区别是什么? 2. delegate委托 2.1示意图 2.2 DelegetTest.cs 2.3 Deleget_A.cs 2.4 Deleget_B.cs 2.5 运行unity. 点击按键 A  2.6 点击按键 B  3.Event 事件 3.1单个通知 3.1.1示意图  3.1.2 Event_Test.cs 3.1.3 Event_A.cs 3.1.4 运行 点击按键A  3.2多个通知 3.2.1示意图  3.2.2 Event_Test

    2024年02月07日
    浏览(48)
  • c# 事件与委托

    //在C#中, 事件是一种特殊的委托 ,它允许对象通知其他对象发生了某个特定的事件。 //事件通常用于GUI应用程序中,例如当用户单击按钮时,按钮控件会引发Click事件, //然后其他对象可以订阅该事件并执行相应的操作。 //以下是一个简单的示例,演示如何在C#中使用事件和

    2024年02月06日
    浏览(41)
  • C#委托和事件简单复习

    太久没用了,简单的复习一下 快速过一遍语法使用 1.定义一个委托类型 只需要在声明的前面加上delegate,其他的就跟声明一个方法(函数)类似 2.使用刚刚声明的委托 需要定义一个返回值跟参数与我们刚刚定义的委托一致 3.然后声明一个SayHello类型(委托)的变量 把

    2024年02月14日
    浏览(45)
  • 委托与事件(一)——C#版本

      委托是对 函数的封装 ,可以当作给方法的特征指定一个名称。而事件则是 委托的一种特殊形式 ,当发生有意义的事情时,事件对象处理通知过程。   委托是一种引用方法的类型。一旦为委托分配了方法,委托将与该方法具有 完全相同的行为 。   用例子来说明为

    2023年04月09日
    浏览(45)
  • C#学习,委托,事件,泛型,匿名方法

    目录 委托 声明委托 实例化委托 委托的多播 委托的用途 事件 通过事件使用委托 声明事件 泛型 泛型的特性 泛型方法 泛型的委托 匿名方法 编写匿名方法的语法 类似于指针,委托是存有对某个方法的引用的一种引用类型变量,引用可以在运行时被改变。特别用于实现事件和

    2024年02月12日
    浏览(46)
  • C# 中的委托和事件机制

    在C#中,委托和事件是非常重要的概念,用于实现程序中的回调和事件处理。在这里,我们将介绍C#中委托和事件机制的基础知识和用法。 委托是一种类似于C/C++函数指针的概念,它允许将方法作为参数传递到其他方法中,以实现回调函数的功能。委托是一种类型,它可以表示

    2023年04月21日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包