1、事件冒泡
1.1 概念
通俗来讲,当触发(点击或者触摸之类的做法)有父元素的子元素的时候,事件会从事件源(被点击的子元素)开始逐级向上传播,触发父级元素的点击事件,一直会传到window。如果在某一层想要中止冒泡,使用 event.stopPropagation() 。下面见详细的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#parent {
width: 400px;
height: 400px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
#child {
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
<script>
let parent = document.getElementById('parent')
parent.onclick = function () {
console.log('parent')
}
let child = document.getElementById('child')
child.onclick = function () {
console.log('child')
}
</script>
</body>
</html>
我们可以发现,当点击红色区域(子元素)的时候,父级元素的click事件也被触发了。
接下来看两个示例:
1.2 要是不给子元素添加具体的oncilck处理方法,也能冒泡么?
<script>
// let parent = document.getElementById('parent')
// parent.onclick = function () {
// console.log('parent')
// }
let child = document.getElementById('child')
child.onclick = function () {
console.log('child')
}
</script>
效果如下:
子元素在没有定义具体的click处理函数的时候仍然可以冒泡,触发父级元素的click事件。
1.3 子元素触发的事件冒泡会触发父元素所有的事件么?还是触发对应的事件?
<script>
let parent = document.getElementById('parent')
parent.onkeydown = function () {
console.log('parent')
}
let child = document.getElementById('child')
child.onclick = function () {
console.log('child')
}
</script>
结果如下:
我们发现只有相应的事件会发生事件冒泡,不相关的事件不受影响(注意由于click为鼠标的点击,所以同样会触发mousedown与mouseup等相关事件,同时发生冒泡!)
1.4 那么我们应该如何组织这讨厌的事件冒泡机制呢?
很简单,在事件触发时,会传入一个相应的event对象,其中有一个stopPropagation()方法可以阻止事件冒泡(IE中为cancleBubble=true),以下是详细代码:
<script>
let parent = document.getElementById('parent')
parent.onclick = function () {
console.log('parent')
}
let child = document.getElementById('child')
child.onclick = function (ev) {
var e = ev || window.event
// console.log(e)
console.log('child')
stopPropagation(e)
}
function stopPropagation (e) {
if (e.stopPropagation) {
e.stopPropagation()
} else {
e.cancelBubble = true
}
}
</script>
结果如下:
可以通过运行结果来看,事件冒泡成功被阻止了。
看到这里,相信小伙伴们可能会觉得事件冒泡很麻烦,还需要写个事件阻止冒泡行为。但凡事都有双刃剑,事件冒泡同时给我们带来的还有事件委托这一减少DOM操作的神器。
2、事件委托(事件代理)
2.1 概念
事件委托,首先按字面的意思就能看你出来,是将事件交由别人来执行,再联想到上面讲的事件冒泡,是不是想到了?对,就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托:
2.2 for循环遍历给每个li添加事件
在开发的时候可能会遇到这种情况:如给ul下的每个li都加一个事件,你可能会通过遍历来给每个栏目添加事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="parentUl">
<li>我是子元素</li>
<li>我是子元素</li>
<li>我是子元素</li>
</ul>
<script>
var ul = document.getElementById('parentUl'),
li = ul.getElementsByTagName('li')
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
alert(this.innerHTML)
}
}
</script>
</body>
</html>
这种方式来添加事件固然简单,但是需要多次操作DOM,如果有100、1000个同级的元素需要添加事件,这种方式就不可取了。
2.3 利用事件代理给li添加事件
事件委托是利用事件的冒泡原理来实现的,比如我们平时在给ul中的li添加事件的时候,我们都是通过for循环一个个添加,如果li很多个的话,其实就有点占内存了,这个时候可以用 事件代理来优化性能,文章来源:https://www.toymoban.com/news/detail-492520.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id='ulid' onclick='clickFunc()'>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
<script>
function clickFunc (ev) {
var ev = ev || window.event
console.log(ev)
var oLi = ev.srcElement || ev.target
if (oLi.nodeName.toLowerCase() == 'li') {
alert(oLi.innerText)
}
}
</script>
</body>
</html>
结果如下:
文章来源地址https://www.toymoban.com/news/detail-492520.html
到了这里,关于JS事件冒泡与JS事件代理(事件委托)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!