<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都是在放屁!
可是总结就是这样,
做笔记就是这样,
来龙去脉要搞清楚,
因为我是一个天秤座的强迫症患者!