js 事件委托和事件冒泡

最新推荐文章于 2024-04-27 00:23:45 发布

小k铁柱

最新推荐文章于 2024-04-27 00:23:45 发布

阅读量227

点赞数

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

本文链接：https://blog.csdn.net/qq_40890601/article/details/108282793

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

事件委托和事件冒泡

事件委托主要是利用冒泡原理，
何为冒泡？就是子元素的事件传播到父元素，比如说子元素的点击事件同时也会触发父元素的点击事件；
何为委托？当子元素比较多的时候，我不想一个一个地去阻止冒泡，或者一个一个地监听它们的事件，所以我直接利用冒泡原理，将事件监听委托给父级去做；

网上有一个取快递的举例比较好理解，
也就是说，在公司里张三李四王二麻子都有快递要取，但是他们不想自己站在公司门口干等，所以他们就拜托前台小姐姐帮忙接收，前台小姐姐拿到快递以后就会根据他们的名字分发给相应的人。

<ul>
<li></li>
<li></li>
<li></li>
</ul>

比如给 ul 和 li 分别设置了一个点击事件，当点击li 的时候，就会往上传播触发 ul 的点击事件。
事件委托就是把子元素的事件委托给父元素去处理。这样不管我们点击的是哪个 li ，触发的点击事件都只是父级的点击事件
只有一个 li 的时候可以直接阻止冒泡行为，可万一有100呢？不可能去阻止100次，所以就有了事件委托。

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code 根据具体 去处理 一般是有规律可循
    
  }

事件监听

为元素绑定监听函数有三种方式，元素的on- 属性，元素节点的事件属性，以及EventTarget.addEventListener()

<body onload="doSomething()"> 

div.onclick = function (event) {
  console.log('触发事件');
};

window.addEventListener('load', doSomething, false);

元素的on- 属性污染了HTML 元素，不符合HTML 和 JS 分离的原则，onclick 属性只能设置一次，重复设置的话后面的会覆盖前面的，所以一般建议使用第三种 EventTarget.addEventListener()。

语法

target.addEventListener(type, listener[, useCapture]);

type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（参见后文《事件的传播》部分），默认为false（监听函数只在冒泡阶段被触发）。该参数可选。

使用 EventTarget.addEventListener()的好处：

同一个事件可以添加多个监听函数。能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。除了 DOM
节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。
this 的指向

小k铁柱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件委托和事件冒泡

事件委托和事件冒泡主要是利用冒泡原理，何为冒泡？就是子元素的事件传播到父元素，比如说子元素的点击事件同时也会触发父元素的点击事件；何为委托？当子元素比较多的时候，我不想一个一个地去阻止冒泡，或者一个一个地监听它们的事件，所以我直接利用冒泡原理，将事件监听委托给父级去做；网上有一个取快递的举例比较好理解，也就是说，在公司里张三李四王二麻子都有快递要取，但是他们不想自己站在公司门口干等，所以他们就拜托前台小姐姐帮忙接收，前台小姐姐拿到快递以后就会根据他们的名字分发给相应的人。<ul>
复制链接

扫一扫

专栏目录