js中的事件委托

最新推荐文章于 2022-07-20 14:17:42 发布

Liu_Jun_Tao

最新推荐文章于 2022-07-20 14:17:42 发布

阅读量244

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Liu_Jun_Tao/article/details/82709635

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

最近面试的过程中，经常被问到这个问题，那么这里记录一下，加深印象。在使用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 ,这里只是记录一下~~~

Liu_Jun_Tao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的事件委托

最近面试的过程中，经常被问到这个问题，那么这里记录一下，加深印象。在使用js中的事件时，比如click、focus、mouseenter、mouseover等等常用的事件，我们知道这么给一个元素添加事件监听：var btn = document.getElementById('myButton');// DOM0级添加事件btn.onclick = function(e){ /...
复制链接

扫一扫