最近面试的过程中,经常被问到这个问题,那么这里记录一下,加深印象。在使用js中的事件时,比如click、focus、mouseenter、mouseover等等常用的事件,我们知道这么给一个元素添加事件监听:
var btn = document.getElementById('myButton');
// DOM0级添加事件
btn.onclick = function(e){
// some code
}
// DOM2级事件
btn.addEventListener('click', function(e){
// some code
},false);
我们得先清楚js中的事件流,也就是经常说到的事件冒泡。
比如在这么一个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>
<div></div>
</body>
</html>
当我们点击了DIV元素,那么这个click的事件是按照<div> -> <body> -> <html> -> <document>这样的顺序传递的,也就是说js会先判断div这个元素是否绑定了click事件,如果绑定了,ok,先执行,然后在判断body这个元素,是否绑定了click事件,如果没有绑定,那么继续判断html、document。这就是所谓的冒泡,从里到外执行节点所绑定的事件处理程序。
现在我们再来解释什么是事件委托,事件委托就是当要给元素绑定事件时,不直接给这个元素添加事件,而是把事件处理程序添加到该元素的外层父元素上,从而通过冒泡来执行事件处理程序的一种方法。
最常见的就是在做导航栏、菜单这种ul>li结构时,我们通常在li上实现类似点击、鼠标滑入、滑出这样的事件,如果给每个li元素上都绑定事件,是很耗性能的。使用事件委托的方式,在ul上绑定事件,那么既实现目的,也优化了代码。
之前我们在给每个li元素绑定事件时,在事件处理程序中通过this可以获取到当前元素。那么,通过事件委托的方式,我们该怎么去判断呢?这里我们就得了解事件对象:event。也就是我们在事件处理程序中的参数e(也可以写成event)
event中有很多的属性和方法,比较常用的currentTarget、target、type、stopPropagation()、preventDefault()这些
还是接着上面ul>li的例子:
<!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>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
console.log(e.currentTarget)
console.log(e.target)
}
</script>
</body>
</html>
在浏览器中分别点击这4个li,查看打印:
我们可以通过e.target来获取到我们事件真正的目标,e.currentTarget则一直是事件绑定的对象。
那么我们经常会遇到这么一种情况,我们在外层父元素上和内层子元素上都绑定了同样的事件,由于事件冒泡,导致我们只想执行子元素的事件处理程序时,而父元素的事件也执行了,很蛋疼的。
接着上面的例子,我们给body元素绑定一个click事件,看看效果:
<!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 onclick="console.log('body clicked');">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
console.log(e.currentTarget)
console.log(e.target)
}
</script>
</body>
</html>
在浏览器中,我们点击了一个li元素,
果然body上面的事件绑定的程序也执行了,那么我们就需要阻止这种默认的冒泡行为!在子元素事件程序最后加上e.stopPropagation()就可以了
这里另外说一下:
e.preventDefault()是阻止事件的默认行为。比如a链接的跳转,submit提交表单刷新页面,并不会阻止冒泡哦~
除了这样阻止事件默认行为,也可以return false ,这里只是记录一下~~~