对JS中事件委托的理解

时间 2019-11-21

原文原文链接

什么是事件委托：javascript

事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪一个子元素的事件。(不理解冒泡的能够去百度下)css

定义：
利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。
使用事件委托技术能够避免对特定的每一个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪一个子元素的事件。

事件委托的好处：html

事件委托技术能够避免对每一个字元素添加事件监听器，减小操做DOM节点的次数，从而减小浏览器的重绘和重排，提升代码的性能。java

使用事件委托，只有父元素与DOM存在交互，其余的操做都是在JS虚拟内存中完成的，这样就大大提升了性能。jquery

何时用事件委托：浏览器

当子元素有不少，须要对子元素的时间进行监听的时候函数

案例：性能

（1）原生JS实现事件委托效果测试

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener('click',function(e){
    alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>

事件委托三部曲：
第一步：给父元素绑定事件
给元素ul添加绑定事件，经过addEventListener为点击事件click添加绑定spa

第二步：监听子元素的冒泡事件
这里默认是冒泡，点击子元素li会向上冒泡

第三步：找到是哪一个子元素的事件

经过匿名回调函数的参数e用来接收事件对象，经过target获取触发事件的目标

（2）JQ实现事件委托

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
$("ul").on('click',function(e){
    alert("点击的内容是："+$(e.target).text());
});
</script>
</body>
</html>