js委托事件-addEventListeners（冒泡方向）

JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。

实例：

给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="div"><p>11111</p><p>2222</p>
</div>
<button id="btn">xxxx</button>
<script>document.getElementById("div").addEventListener("click",function(e){if(e.target.nodeName=="P"){alert("xxx")}})document.getElementById("btn").οnclick=function(){var p = document.createElement("p");p.innerHTML="333";document.getElementById("xx").appendChild(p);}
</script>
</body>
</html>

冒泡方式分为2种，一种是由子元素向上冒泡，一种是由父元素向下冒泡

在使用addEventListeners的时候有第三个参数true和flase；默认是flase，由子元素向上冒泡

当我们设置为true的时候就会由父元素向下冒泡

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4"><div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div>
</div>
<script>document.getElementById("id1").addEventListener('click',function(){console.log("id1");},true)document.getElementById("id2").addEventListener('click',function(){console.log("id2");},true)
</script>
</body>
</html>

js委托事件-addEventListeners（冒泡方向）相关推荐

JS 哪些事件支持冒泡
javascript（JS） 0基础快速入门（七）（事件的冒泡、委托和绑定）
事件的冒泡所谓冒泡指的就是事件的向上传导当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发类似于给一个盒子绑定了鼠标点击事件,当点击了盒子后,该鼠标点击事件会一直往上触发, 如果这盒子 ...
JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
js事件委托(事件代理)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...
js事件委托(事件代理)的原理以及优缺点
js事件委托/事件代理的原理以及优缺点什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上 ...
JS的事件监听与委托机制
JS的事件监听机制小故事: 很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫"IE"的小子,这孩子比较傲气,他认 ...
JS的事件对象和事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象 ...
js,jq.事件代理（事件委托）复习。
<ul id = "lists"> <li>列表1</li> <li>列表2</li> <li>列表3< ...

js委托事件-addEventListeners（冒泡方向）

js委托事件-addEventListeners（冒泡方向）相关推荐

最新文章

热门文章