js事件冒泡和委托机制

发表于 | 分类于

js事件冒泡

js所谓的事件冒泡就是子级元素的某个事件被触发，他的上级元素的该事件也会被递归的执行。
有如下html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul data-type="cityPick">
<li data-id = "0">全部</li>
    <li data-id = "1">纽约</li>
    <li data-id = "2">洛杉矶</li>
</ul>
<script src = "event.js"></script>
</body>
</html>

js代码如下

1
2
3
4
5
6
7
$("ul[data-type = 'cityPick']").on('click',function () {
  alert("父元素被点击");
})

$("ul[data-type = 'cityPick']").on('click','li',function () {
    alert("子元素被点击");
})

当点击子元素时，父元素的alert事件也会被触发。
而在某些时候，我们不希望他冒泡，
可以用stopPropagation()方法阻止对父元素的冒泡传递。
某些事件的默认事件不能被触发，例如点击a的href 链接跳转时，不进行跳转
可以用e.preventDefault()事件

1
2
3
4
$("ul[data-type = 'cityPick']").on('click','li',function (e) {
    e.stopPropagation();//阻止事件冒泡
    alert("子元素被点击");
})

js事件委托

事件委托实际上利用了冒泡的原理，从点击的元素开始，递归方式的向父元素传播事件，好处是不用为每一个子元素设置click事件，而只需为父元素上绑定一次即可。
如下代码html

1
2
3
4
<div id = "btnGroup">
    <div class = "btn">按钮1</div>
    <div class = "btn">按钮2</div>
</div>

js代码：

1
2
3
$("#btnGroup").on('click','.btn',function () {
    alert($(this).html());
})

由于事件委托是通过事件冒泡实现的，所以如果子级的元素阻止了事件冒泡，那么事件委托也将失效！
(参考链接)[https://www.cnblogs.com/alsy/p/4915912.html]