JS和JQuery中的事件托付 学习笔记

事件托付事实上并非一个非常高级的技巧，比方在一个页面里面。当仅仅存在两个button的时候。可能你给button加入监听是这种：（本文不考虑浏览器兼容性。关于事件的兼容性可參考前面的学习笔记）

<div id="container">
    <button id="btn1">button1</button>
    <button id="btn2">button2</button>
</div>

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.addEventListener("click", clickHandler1);
btn2.addEventListener("click", clickHandler2);

当button越来越多的时候。甚至到了几十上百的时候。我相信非常少有人会选择一个一个的加入事件，首先。事实上事件处理函数每一个都是对象，都会占用内存，创建的越多。内存开销越大，性能越差；其次。大量“反复”性的代码拥挤在脚本里，非常难以维护，也非常难看。还有。加入大量监听意味着要频繁訪问DOM元素，延迟整个页面的訪问时间。

事件托付就是解决问题的一个方案。

我们知道。在DOM节点构成的DOM树中，子节点产生一个事件之后会逐级冒泡到父元素上：



事件托付就利用这一特性。仅仅需给全部的button的父元素比方container加入一个事件，这样无论是哪个button，仅仅要触发了绑定的事件都会冒泡到container上，我们仅仅需推断是不是你想监听的button就可以。

var container = document.getElementById("container");
container.addEventListener("click", function(e){
    //获取事件触发对象
    var target = e.target;
    if(target.id == "btn1"){
        alert("btn1");
    }else if(target.id == "btn2"){
        alert("btn2");
    }
});

这种方法另一个明显的优点是你不必再问以后创建的元素加入监听。

比方在上面的推断里加入

else if(target.id == "btn3"){
    alert("btn3");
}

加入这个事件处理程序的时候页面中还并没有btn3，但btn3非常可能是由用户动态创建的，但无论用户什么时候创建，你都能在这个条件里捕获它。

JQuery里面的事件托付

事实上在JQuery里。由于非常easy创建一个JQuery集合。所以处理事件相对简单。

一、click函数、bind函数等：

$("a").click(function(){
    if($(this).hasClass("a1")){
        //...
    }else if(...){
        //...
    }
});

$("a").bind("click", function(){
    if($(this).hasClass("a1")){
        //...
    }else if(...){
        //...
    }
});

事实上这种方法相同也是通过遍历全部a标签，给他们加入事件函数。但比原生js代码量要少非常多。

二、live()

live和上面讲的原生js相似。不指定父元素的时候，将事件绑定在了document上，比方：

$(".link").live("click", function(){
    //...
});

当有事件冒泡到document上时。将检查事件是否为click事件，元素是否带有link的className。满足这两个条件则将触发事件处理函数。

除了默认绑定在document上。也能够绑定在指定父元素上：

$(".link", $("#container")).live("click", function(){
    //...
});

三、delegate

事实上无论是live还是bind，他们的写法都非常奇怪，我们讨论的事件托付都是给父元素加入的事件监听，但一直到如今都好像是在子元素上调用的方法。只是还好JQuery里面另一个函数：delegate。

相同是绑定事件到.link筛选条件上，使用delegate方法例如以下：

$("#container").delegate(".link", "click", function(){
    //...
});

能够看到，我们在须要绑定的父元素（id名为container的元素）上调用的delegate方法，并传递三个參数：监听元素筛选条件、监听事件名、事件处理函数。

通过链式调用更加舒服：

$("#container").delegate(".link", "click", function(){
    //...
}).delegate(".btn", "click", function(){
    //...
}).delegate(".whatever", "click", function(){
    //...
});

注意

bind是不能为后面动态生成的元素绑定事件的（由于调用bind时遍历的是当时页面里的全部元素）。

live和delegate是能够为动态生成的元素触发事件处理函数的，由于绑定在父元素上的仅仅是一个筛选条件。

最后须要注意的是相同是绑定在document元素上的click事件：

$(".btn").live("click", function(){
    //...
});

$("document").delegate(".btn", "click", function(){
    //...
});

最好使用delegate方法，由于尽管live相同是绑定在document上。但$(“.btn”)这句代码还是会遍历全部的.btn元素并给其创建JQuery对象，相比于直接使用document，性能上会有所不如。

当然。就拿写法来说，我们也更应该喜欢delegate方法。