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