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

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

概念

自身的事件通过冒泡机制代理到父辈元素上，让父辈元素代替自己来执行所要执行的事件；

用途

1. 父元素当中多个子元素含有相同事件；
2. 动态创建的元素含有某种事件；

首先谈谈多个子元素问题

    <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呢，

javascript事件代理到这里就这里就结束了；感谢您的阅读

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