Jquery中的事件绑定有三种方式:
- onclick事件
onclick非常好理解,点击时候触发onclick函数中的代码执行
$("button").onclick(
$("p").slideToggle();//显示和隐藏
);
- bind函数
bind方法是为某个元素绑定一个事件,bind的方法只能给已经存在的DOM元素绑定事件,对于后面JS中新增加的元素是没有效果的,也即是说Jquery中的bind方法对DOM元素绑定事件之前,DOM元素一定必须先存在才能生效
$(document).ready(function(){
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
- live方法
live方法给元素绑定事件,与bind不同的是,live方法对DOM元素绑定的事件不同的是,不论DOM元素是后面添加进去的,也对中的html生效。比如有如下代码:
$("#clickMe").live("click",fn);
$("div ul ").append("<div id='clickMe'></div>");
那么对于后面添加的DOM元素也是能够生效的。这就是和Bind方法的区别。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
比如有如下代码,引用其他文档:可以用off来移除点击事件:
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
</script>
</head>
<body>
<p>Click this paragraph to change its background color.</p>
<p>Click the button below and then click on this paragraph (the click event is removed).</p>
<button>Remove the click event handler</button>
</body>
</html>