jQuery.on()和jQuery.off()--注意事项

总结：                                                                                                                                 

1、这两个都是是官方推荐的为元素绑定/移除事件的函数~虽然函数须由一个jQuery调用~但本意应该是为调用此函数的jQuery对象的子元素绑定/移除事件

子元素由函数中的selector选择器指定~只是当用户没用设置其selector参数时函数就为当前调用它的jQuery对象绑定/移除事件。

2、参数handler（即绑定的事件处理函数）中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。

 

 

代码实例：                                                                                                                       码

 

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

 

 

// 为div中的所有p元素绑定click事件处理程序
    // 只有n2、n3可以触发该事件
    //$("div").on("click", "p", myFun);


    //为div中的id为n2的元素绑定click事件处理函数
    $("div").on("click", "#n2", myFun);

    function myFun(){
        // 这里的this指向触发点击事件的p元素(Element)
        alert( $(this).text() );
        //因为上面的selector是"#n2"~所以移除时也只能写"#n2"
        $("div").off("click","#n2",myFun);
        //这里虽然".myN2"也一样唯一选中"#n2"这个p元素~但是因为上面绑定时使用的选择器是"#n2"~所以下面那句无法移除绑定的click事件
        //$("div").off("click",".myN2",myFun);
    }

 

其他：                                                                                                                                 

为元素同时绑定多个事件处理函数

$("div").on({
        mouseover:m1,
        mouseout:m2,
        click:m3
    },"p");
    function m1() {$("body").css("background-color","lightgray");}
    function m2() {$("body").css("background-color","lightblue");}
    function m3 (){$("body").css("background-color","yellow");}