js事件委托和事件冒泡

js事件委托基本原理：

将子元素的事件委托给父元素来处理
就算父级下面暂时还没有子元素
待到子元素节点出来后一样可以触发事件

如果要删除ul下面的每个li，点击li即可删除
传统做法：
循环给每个li绑定事件，通过点击li删除自身
但是新增的li节点并不会绑定事件

<body><ul><li>1</li><li>2</li><li>3</li></ul><script>let li = document.querySelectorAll('li')let ul = document.querySelector('ul')for(let i = 0;i<li.length;i++){li[i].onclick = function(){ul.removeChild(this)}}</script>
</body>

所以要用到事件委托来做
把li的事件绑定到ul身上：

<body><ul><li>1</li><li>2</li><li>3</li></ul><script>let ul = document.querySelector('ul')ul.onclick = function(e){ul.removeChild(e.target)}</script>
</body>

可以打印e.target
得到的是li元素的自身

js事件冒泡

点击子元素也会触发父元素的事件

<body><div><p>12312</p></div><script>let body = document.querySelector('body')let div = document.querySelector('div')let p = document.querySelector('p')body.onclick = function(){console.log('body');}div.onclick = function(){console.log('div');}p.onclick = function(){console.log('p');}</script>
</body>

点击p标签，也会触发body和div的事件
如何解决呢？
我们可以加上e.stopPropagation来阻止事件冒泡

<body><div><p>12312</p></div><script>let body = document.querySelector('body')let div = document.querySelector('div')let p = document.querySelector('p')body.onclick = function(){console.log('body');}div.onclick = function(){console.log('div');}p.onclick = function(e){e.stopPropagation();console.log('p');}</script>
</body>

这样点击p标签就不会触发div和body的事件

js事件委托和事件冒泡相关推荐

js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS事件委托或者事件代理原理以及实现
事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...
javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。...
2018年12月13日更新 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
js事件委托或事件代理
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
事件委托、事件冒泡与事件捕获
目录事件委托: 1.原理 2.实现 ①在介绍事件委托的方法之前,我们先来看一段一般方法的例子: ②那么我们用事件委托的方式做又会怎么样呢? ③要是每个li被点击的效果都不一样,那么用事件委托还有用吗 ...
js中的事件委托或是事件代理详解
参考文章:https://www.cnblogs.com/liugang-vip/p/5616484.html 概述事件委托也叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒 ...
JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
事件注册方法、阻止默认事件、事件对象、事件冒泡:事件委托、事件捕获、重置表单
dom两种注册事件语法 1.点语法注册事件: 事件源.事件类型 = 事件处理函数特点:不能注册'同名事件', 否则会覆盖 2.addEventListener 事件源.addEventListene ...
事件委托（事件代理）概述
事件委托(事件代理)概述什么是事件委托(事件代理) 事件委托(事件代理)是基于Js冒泡原理,把本来加在子元素身上的事件,加在了其父级身上. 通过event对象里记录的"事件源", ...
什么是事件委托？事件委托的原理以及优缺点
事件委托又称事件代理, 下面将要将要简要叙述一下这种方法的原理及优点一什么是事件委托? 我们看下面的例子: 假使我们需要对 3 个 li 元素添加点击事件: 传统的方法是分别给每个 li 元素绑定 ...

js事件委托和事件冒泡

js事件委托基本原理：

js事件冒泡

js事件委托和事件冒泡相关推荐

最新文章

热门文章