事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
这种直接绑定#list li的写法，其实就是绑定了5次li标签。这样的多次绑定是比较消耗性能的。
事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
这种写法是绑定#list节点，用于监听从子节点li的事件冒泡事件。这样只需要绑定父节点#list，既节省性能，也可以解决一个新增子节点的问题。
下面来写写示例，演示一下。
首先编写呈现绑定#list li的示例
当点击li标签的时候，则设置backgroundColor为red，如下：
这个示例有一个缺点，如果后面再创建一个li标签，那么此时这个新增的li标签就没有这个click()事件。
在click()事件后面创建一个li标签
如果需要在#list内部的最后加上一个li标签，可以使用append()方法。
因为这个最后第6个li标签是在绑定click()事件之后创建的，所以这种写法，怎么点击第6个li标签都不会触发click()事件。
改写使用事件委托的方式，则第6个li标签可以触发click事件
采用父节点#list使用事件委托的方法，可以绑定新增的click()节点事件。因为这个是利用事件冒泡的原来来实现的。
如果点击#list下任何li，这样的话都会出现一个click()事件冒泡至#list，此时#list再进行处理即可。
示例完整代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
// $("#list li").click(function(){
// $(this).css({"backgroundColor":"red"});
// })
$("#list").delegate("li","click",function(){
$(this).css({"backgroundColor":"red"});
})
var $li = $('<li>6</li>');
$("#list").append($li);
})
</script>
<style type="text/css">
#list{
background-color: gold;
}
</style>
</head>
<body>
<!-- ul#list>li{$}*5 -->
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
网友评论