Javascript动态绑定

<div onclick="test()"></div>
<script>
    function test(){
        //code
    }
</script>

上面这种方法是很low逼的，用了这种方法工资就涨不上去你信不信？下面这种也是...

<div id="test"></div>
<script>
    var test = document.getElementById("test");
    test.onclick = function(){
        //code
    };
</script>

能不能用一个稍微有点逼格的方法？

<div id="test"></div>
<script>
    var test = document.getElementById("test");
    test.addEventListener("click",function(){
        //code
    });
</script>

addEventListener() 还能解绑

<div id="test"></div>
<script>
    var test = document.getElementById("test");
    function testFunction(){
        //code
    }
    test.addEventListener("click",testFunction);
    test.removeEventListener("click",testFunction);
</script>

听说这个方法对IE8无法向下兼容？没关系，我们还有attachEvent/detachEvent

<div id="test"></div>
<script>
    var test = document.getElementById("test");
    function testFunction(){
        //code
    }
    
    //绑定
    if (test.addEventListener) {
        test.addEventListener("click", testFunction);
    } else if (test.attachEvent) {
        test.attachEvent("onclick", testFunction);
    }
    
    //解除
    if (test.removeEventListener) {
        test.removeEventListener("click", testFunction);
    } else if (test.detachEvent) {
        test.detachEvent("onclick", testFunction);
    }
</script>

有一种库叫做jQuery...你可以用bind()，这么写...

<div id="test"></div>
<script>
    $("#test").bind("click",function(){
        //code
    });
    $("#test").unbind("click");
</script>

这么写...

<div id="test"></div>
<script>
    $("#test").bind("click mousemove",function(){
        //code
    });
</script>

这么写...

<div id="test"></div>
<script>
    $("#test").bind({
        "click":function(){
            //code
        },
        "mousemove":function(){
            //code
        }
    });
</script>

还可以用live(),向当前或未来的匹配元素添加一个或多个事件处理器。可以这样写...

<div id="test"></div>
<script>
    $("#test").live("click",function(){
        //code
    });
    $("#test").die("click");
</script>

还可以这样写...

<div id="test"></div>
<script>
    $("#test").live("click mousemove",function(){
        //code
    });
</script>

换着姿势写...

<div id="test"></div>
<script>
    $("#test").live({
        "click":function(){
            //code
        },
        "mousemove":function(){
            //code
        }
    });
</script>

还可以用delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，适用于当前或未来的元素（比如由脚本创建的新元素）。

<div class="test">
    <div id="test_inside"></div>
</div>
<script>
    $(".test").delegate("#test_inside","click",function(){
        //code
    });
</script>

<script>
    $(".test").delegate("#test_inside","click mousemove",function(){
        //code
    });
</script>

<script>
    $(".test").delegate("#test_inside",{
        "click":function(){
            //code
        },
        "mousemove":function(){
            //code
        }
    });
</script>

可是人家官网说了...

自从jquery1.7版本以后bind()函数推荐用on()来代替

live()只被jquery1.9版本以下支持，jquery1.9及其以上版本删除了这个方法，jquery1.9以上版本用on()方法来代替。

delegate()倒是一直保留着，可适用于jquery1.4.2及其以上版本，但是名字太丑了。

于是就这样...

<div class="test">
    <div id="test_inside"></div>
</div>
<script>
$(".test").on("click", "#test_inside", function () {
    //code
});
$(".test").off("click");
</script>

就这样...

<div class="test">
    <div id="test_inside"></div>
</div>
<script>
    $(".test").on("click mousemove","#test_inside",function(){
        //code
    });
</script>

就这样...

<div class="test">
    <div id="test_inside"></div>
</div>
<script>
    $(".test").on({
        "click":function(){
            //code
        },
        "mousemove":function(){
            //code
        }
    },"#test_inside");
</script>

就这样被你征服...

注意：on()和delegate()两个参数的位置正好相反...城里人真会玩！Orz~~

补充说明：

bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置

<div class="test"></div>
<script>
    //利用bind()方法，给P标签设置click方法   ======失败 没有任何反应=======
    $(".test p").bind("click", function () {
        alert("bind()添加单击事件成功!");
    });

    //利用live()方法.给P标签设置click方法   =======成功调用方法============
    $(".test p").live("click", function () {
        alert("live()添加单击事件成功!");
    });

    //利用delegate()方法.给P标签设置click方法  =======成功调用方法============
    $(".test").delegate("p", "click", function () {
        alert("delegate()添加单击事件成功!");
    });

    //利用on()方法.给P标签设置click方法  =======成功调用方法============
    $(".test").on("click", "p", function () {
        alert("on()添加单击事件成功!");
    });
    $(".test").append("<p>test</p>");
</script>

写在结尾

关于版本问题，这个事情不得不说。

bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+。

这是个让人纠结的问题，当一个天秤座的强迫症患者面对不同版本的jQuery和不同版本时代的方法的时候，选择成为了一个大问题。

但是如果你去看一看现在主流的js框架的源码你会发现，

怎么这么多on()啊啊啊啊啊啊啊啊

所以，用on()就对了！

其他的方法，封装了半天，最后底层代码还是调用onclick()什么的！

诚然，我也很讨厌废话，

写了那么长，有2/3都是在放屁！

可是总结就是这样，

做笔记就是这样，

来龙去脉要搞清楚，

因为我是一个天秤座的强迫症患者！

Javascript动态绑定

推荐阅读