js之事件委托

什么叫事件委托。

简言之就是应该绑定给子节点的事件绑定给父元素去做。:

1：事件委托原因：

子节点少的时候不能凸显事件委托的必要性，但是，如果有很多子节点的时候就能凸显事件委托的重要性。

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

其次，如果子元素是动态生成的，则添加的点击事件无效。这时候如果绑定给父元素则解决了这一问题。

2：事件委托原理：

事件委托的原理就是利用事件冒泡，所谓时间冒泡是有些js事件会从最后一个子节点一层层的向上传播触发。举个例子，比如节点关系是这样的，ul>li>a,当你点击a节点的时候，会触发a的点击事件，但是如果li或者ul上也绑定了点击事件，则也会被触发。

3：举例说明

<!DOCTYPE html>
<html>
<meta charset="utf-8"></meta>
<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>
	 <button onclick="addLi()">点我插入一行li</button>
    <ul id="list">
        <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">
$("li").click(function(){
	 alert("点击的内容是："+$(this).text());
})

function addLi(){
	var i=$("#list").children("li:last-child").text()
	i++;
	var a='<li><a>'+i+'</a></li>';
	$("#list").append(a);
}
</script>
</body>
</html>

点击1-8的li可以获取对应的值，但是点击生成按钮新生成li以后，点击新生成的li则没有任何反应。但是代码改成下面的即可，即把事件委托给父元素，这样即使是新生成的li也添加上了点击事件。

<!DOCTYPE html>
<html>
<meta charset="utf-8"></meta>
<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>
	 <button onclick="addLi()">点我插入一行li</button>
    <ul id="list">
        <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());
});
function addLi(){
	var i=$("#list").children("li:last-child").text()
	i++;
	var a='<li><a>'+i+'</a></li>';
	$("#list").append(a);
}
</script>
</body>
</html>

效果图如下

2：事件委托原理：

猜你喜欢