正确的使用JQuery实现事件回调函数绑定 |

9月 28, 2014 | Nix.Huang

本文测试所用的jquery版本是[jquery-1.11.1.js]
jQuery提供了[bind,unbind], [live, die], [delegate, undelegate], [on, off] 方法对来实现事件回调函数的绑定，[bind,unbind], [live, die], [delegate, undelegate]各有所长，到了jQuery1.7，[on, off] 横空出世，一统江湖。他一个人可以完成其他三个函数对能完成的功能，所以我们爱他无商量。
先看看前三个函数对的局限性：
假设有如下的html片段，

<div id="container">
        <ul id="list">        
            <li>Item #1</li>        
            <li>Item #2</li>        
            <li>Item #3</li>        
            <li>Item #3</li>
            <li>Item #4</li>    
            <li>Item #5</li>    
            <li>Item #6</li>    
            <li class="special">Item #7</li>    
            <li>Item #8</li>                
            <li>Item #9</li>    
        </ul>
</div>

</ul>

</div>

我们需要给不含special class的每个<li>指定一个事件处理函数，将 <li>的内容输出到控制台，如果在页面呈现的时候有可能动态的添加新的项比如<li>Item #10</li> ，那么我们最好把事件处理函数绑定到<ul id="list"> 元素上。为什么能绑定到<ul id="list"> ？因为事件会bubble。元素的事件会一直向上传递直到根元素window。为什么要绑定到<ul id="list"> ？因为直接绑定到<li>，当插入<li>Item #10</li>时不会处理它的click事件。
使用bind

$("#list").bind("click", function(event) {
    var target = $(event.target);
    if(!target.hasClass("special")) {
        console.log(target.text());
    }
}
);

$("#list").bind("click", function(event) {

var target = $(event.target);

if(!target.hasClass("special")) {

console.log(target.text());

}

);

可以看到使用这个方式很不好，元素过滤和我们的逻辑混在一起了。

使用live
哈哈，这个方法在jquery 1.9版本就已经被移除了。

使用delegate

$("#list").delegate("li:not(.special)", "click", function(event) {
    var target = $(event.target);
    console.log(target.text());
}
);

$("#list").delegate("li:not(.special)", "click", function(event) {

var target = $(event.target);

console.log(target.text());

}

);

这个函数要求selector, eventType,callback都是必填的，对将事件绑定到自身很不友好。
现在看看使用on
绑定到#list

$("#list").on("click",  "li:not(.special)",  function(event) {
    var target = $(event.target);
    console.log(target.text());
}
);

$("#list").on("click", "li:not(.special)", function(event) {

var target = $(event.target);

console.log(target.text());

}

);

注意：on和delegate表示选择器的参数都是相对于$("selector")的子元素，且他们在on和delegate中的顺序相反。
绑定到#list li

$("#list li:not(.special)").on("click", function(event) {
    var target = $(event.target);
    console.log(target.text());
}
);

$("#list li:not(.special)").on("click", function(event) {

var target = $(event.target);

console.log(target.text());

}

);

可以看到这两种需求on 都能轻松胜任。
其实在1.7版本以后bind, delegate只是对on的一个封装，有可能今后后被删掉的，所以骚年，是时候和bind, delegate说分手的时候了。

Posted in: WEB practise

知行合一，止于至善

正确的使用JQuery实现事件回调函数绑定

站内搜索