一。绑定事件、取消事件
为元素绑定事件的方式有好几种，取消其绑定的事件的方式也有几种。
在下面这个例子中列举出来：
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>event</title>
<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function() {
// 通过on函数添加
$("#on").on("click", function() {
alert("ON绑定 --> 点击事件");
})
// 直接通过事件名指定
$("#directly").click(function() {
alert("直接绑定 --> 点击事件");
})
// 通过bind绑定
$("#bind").bind("click", function() {
alert("bind指定 --> 点击事件");
})
// 此按钮之外所有按钮点击事件失效
$("#btB").click(function() {
$("input:not(:last)").each(function() {
$(this).unbind("click");
//也可以用这个：$(this).off("click");
/*虽然on 和 off是相对应，但也可以用于
取消其他方式绑定的事件上*/
})
})
// 双击则追加回去
$("input:not(:last)").dblclick(function() {
$(this).on("click", function() {
alert($(this).val() + " --> 点击事件");
});
})
})
</script>
</head>
<body>
<input type="button" id="on" value="ON绑定" />
<input type="button" id="directly" value="直接绑定" />
<input type="button" id="bind" value="bind绑定" />
<input type="button" id="btB" value="按钮B" /></body>
</html>
使绑定的事件只生效一次：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function() {
// 第一种方式：点击事件只生效一次
$("#one").one("click", function() {
alert("按钮的点击事件只生效一次");
})
// 第二种方式: 直接使按钮灰化
$("#one").click(function(){
alert("按钮将会灰化");
$(this).attr("disabled","disabled");
})
// 恢复
$("#reset").click(function(){
$("#one").removeAttr("disabled");
})
})
</script>
</head>
<body>
<input type="button" id="one" value="ONE绑定" />
<input type="button" id="reset" value="恢复" />
</body>
</html>
其他事件可以通过这个例子举一反三。
二。事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function() {
// 为按钮绑定点击事件
$("input[name='bt']").click(function(){
alert("点击事件！！");
})
// 追加按钮
$("#btn").click(function () {
$("div").append("<input type='button' name='bt' value='按钮' style='margin-left: 5px;'/>");
})
})
</script>
</head>
<body>
<div>
<input type="button" name="bt" value="按钮" />
<input type="button" name="bt" value="按钮" />
</div>
<hr />
<input type="button" id="btn" value="新增按钮" />
</body>
</html>
在上面这个例子中，div里的中默认的两个按钮都会被绑定一个点击事件。
但现在点击一下新增按钮，往div中追加一个按钮：
按钮的属性和之前的两个一模一样，不同之处就在于这个按钮无法触发点击事件，即便它符合选择器的条件。因为它是在click方法绑定完所有按钮之后才添加进来的，这种是非委派绑定：
相同的选择器绑定的事件 后续添加进来相同元素不会绑定该事件。
委派模式：
$(document).on("click","input[name='bt']" , function () {
alert("点击事件！！");}
)
先将document对象转换成JQuery对象，使用on添加绑定，参数顺序：
事件类型 -- 选择器 -- [传递的数据] -- 触发的方法
这样，什么时候添加进来的按钮都会被绑定这个点击事件，这就叫事件委派。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
