极简略介绍 javascript 事件代理（事件委托）

极简略介绍 javascript 事件代理（事件委托）

概念

用途

<div class="goods-list">
<div class="goods-view">
<img src="img/default.jpg">
</div>
<div class="goods-info">
<div class="goods-synopsis">
商品列表
</div>
<div class="goods-math">
<span class="goods-reduce">-</span>
<input type="text" value="1" />
<span class="goods-add">+</span>
</div>
</div>
</div>

--比如上面的DOM结构，点击图片的时候弹出一个轮播，里面是商品的各种图片，下面有商品的数量的加减；点击事件有很多，如果我们每个元素都创建一个click事件，将会出现大量的click事件；
--这个时候不妨使用事件代理，将各个事件代理到父辈元素goods-list上面，所创建的click事件也就是仅仅一个，优化了我们的代码，也优化了页面性能;

像js的dom操作，最常见的就是增删改查，新增的dom不会执行事先写好的事件；如下:

<div class="demo-box">

</div>
<script>
$(doucument).ready(function(){
var newDom = '<span class="new-dom">click me</span>';
$('.demo-box').append(newDom);
$('.new-dom').click(function(){
alert('success')
})
})
</script>

--如果你执行了以上代码。你会发现，点击了new-dom并不会有任何效果，这是为什么呢？因为js查询dom结构的时候，并没有查到new-dom这个节点，所以new-dom上的任何事件都不会执行；如果我们想要这个点击事件起作用怎么办呢？这个时候事件代理就来到你面前了；
--那么该怎么用呢？我们知道每个元素都有target这么个事件属性;我们可以通过已存在的父辈元素点击的时候找到"target["属性名"]"这一元素；判断当前点击的时候是否是我们需要执行方法的元素；然后去执行我们所需要执行的事件;
--如果使用的jq,直接使用on事件即可；delegate不建议再使用了，毕竟从3.0版本之后就删除了delegate方法，既然我们有on这么好的方法，何不放弃使用delegate呢，

微信搜索关注公众号 【大前端js】，回复vue教程，react教程，webpack实战等等，获得不同的视频教程，大量视频教程等你来拿；阅读公众号最新一篇文章获取更多视频