您的位置：首页 > Web前端 > JavaScript

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

2017-02-28 10:02 260 查看

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

实例：

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

[html] view plain copy

<!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("xx").onclick=function(){

var p = document.createElement("p");

p.innerHTML="333";

document.getElementById("btn").appendChild(p);

}

</script>

</body>

</html>

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

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

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

实例：

[html] view plain copy

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航