JavaScript中事件委托(事件代理)详解

 

在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢?

事件委托在生活中的例子:

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三我的在公司门口等快递；二是委托给前台MM代为签收。现实当中，咱们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，而后按照收件人的要求签收，甚至代为付款。这种方案还有一个优点，那就是即便公司里来了新员工（无论多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

事件委托在JavaScript中:

好比要给一个dom节点添加一个点击事件,可是如今事件不加在该dom节点自己,而是加在它的父节点身上,利用它父节点触发事件,给该dom节点实现事件效果。

实现原理:

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，而后逐步向上传播事件 举个例子：页面上有这么一个节点树，div>ul>li>a;好比给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么咱们给最外面的div加点击事件，让里面的ul，li，a实现事件效果，因此都会触发，这就是事件委托，委托它们父级代为执行事件。

利用事件委托的做用

• 节省资源,提升效率 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的总体运行性能，由于须要不断的与dom节点进行交互，访问dom的次数越多，引发浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间 若是使用事件委托,则只会与dom节点进行一次交互,有效的减小了和dom交互次数,节省资源,提升效率

• 对于新建立的dom节点,也能够拥有事件

使用场景:

• 重复的给dom节点添加事件
• 给dom树中还没有建立的元素(动态建立)添加事件

使用js添加事件委托

先给出一个例子1:

<ul id="ul">
    <li>周一去游玩</li>
    <li>周二去上班</li>
    <li>周三去休息</li>
    <li>周四去吃饭</li>
</ul>

//利用事件委托给每个li标签添加点击事件
<script>
    var ul = document.querySelector("#ul");
    ul.onclick = function(){
        alert("快醒醒,天天都要上班的!")
    }
</script>

　　

例子中利用父级ul作事件处理，当li被点击时，因为冒泡原理，事件就会冒泡到ul上，由于ul上有点击事件，因此事件就会触发

在例子1中,全部的事件代码都相同,那么若是不一样呢? 例子2:

    <ul id="ul">
        <li>周一去游玩</li>
        <li class="work-day">周二去上班</li>
        <li>周三去休息</li>
        <li>周四去吃饭</li>
    </ul>
<script>
    var ul = document.querySelector("#ul");
    ul.onclick = function(e) {
        var e = event || window.event;
        var target = e.srcElement || e.target;
        if(target.className == "work-day"){
            alert("good boy");
        }else{
            alert("快醒醒,天天都要上班的!");
        }
    }
</script>

　　

这个例子中就会针对于class属性等于"word-day"的li元素作出不一样的事件,其余事件则为默认事件

jQuery的事件委托

    $(function () {
        $('#ul').on('click', 'li', function () {
            if ($(this).hasClass('work-day')) {
                alert("good boy");
            } else {
                alert("快醒醒,天天都要上班的!");
            }
        })
    });

　　

---

总结:

合理使用事件委托能够帮助咱们节省资源,提升效率;也能够给dom中还没有建立的节点添加事件(能够本身尝试一下)。

适合用事件委托的事件：

• click
• mousedown
• mouseup
• keydown
• keyup
• keypress

须要当心的是:mouseover和mouseout虽然也有事件冒泡，可是须要特别的注意，由于须要常常计算它们的位置，处理起来不太容易。

不适合用事件委托的事件：

• mousemove(每次都要计算它的位置，很是很差把控)
• focus，blur等(自己就没用冒泡的特性，天然就不能用事件委托了)