本文最后更新于 1800 天前，其中的信息可能已经有所发展或是发生改变。
1. on()的多事件绑定
之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。
基本用法：.on( events ,[ selector ] ,[ data ] )
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离，传递不同的事件名，可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的
以上都是on方法基本用法，具体可以参考下下边的代码的一些使用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>on绑定多事件</h2>
<h4>测试一</h4>
<div class="left">
点击触发：on('click',fn)
<div id="test1"></div>
</div>
<script type="text/javascript">
//事件绑定一
$("#test1").on('click', function(e) {
$(this).text('触发事件：' + e.type)
})
</script>
<h4>测试二</h4>
<div class="left">
点击触发：on('mousedown mouseup')
<div id="test2"></div>
</div>
<script type="text/javascript">
//多事件绑定一
$("#test2").on('mousedown mouseup', function(e) {
$(this).text('触发事件：' + e.type)
})
</script>
<h4>测试三</h4>
<div class="right">
点击触发：on(mousedown:fn1,mouseup:fn2)
<div id="test3"></div>
</div>
<script type="text/javascript">
//多事件绑定二
$("#test3").on({
mousedown: function(e) {
$(this).text('触发事件：' + e.type)
},
mouseup: function(e) {
$(this).text('触发事件：' + e.type)
}
})
</script>
</body>
</html>
2. on()的高级用法
针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。这些方法的底层实现部分 还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的
委托机制
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
在on的第二参数中提供了一个selector选择器，简单的来描述下
参考下面3层结构
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
给出如下代码：
$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>on事件委托</h2>
<div class="left">
<div class="aaron">
<a>点击这里</a>
</div>
</div>
<script type="text/javascript">
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制，点击a元素的时候，事件触发
$('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
</script>
</body>
</html>
3. 卸载事件off()方法
- 通过.on()绑定的事件处理程序
- 通过off() 方法移除该绑定
根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
$("elem").off()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>删除事件</h2>
<h4>测试一</h4>
<div class="left">
on('mousedown mouseup')
<div class="aaron">点击触发</div>
</div>
<button>点击删除mousedown事件</button>
<script type="text/javascript">
var n = 0;
//绑定事件
$(".aaron:first").on('mousedown mouseup', function(e) {
$(this).text('触发类型:' + (e.type) + ",次数" + ++n)
// ++n;
})
//删除事件
$("button:first").click(function() {
$(".aaron:first").off('mousedown')
})
</script>
<h4>测试二</h4>
<div class="left">
on('mousedown mouseup')
<div class="aaron">点击触发</div>
</div>
<button>点击销毁所有事件off</button>
<script type="text/javascript">
var n = 0;
//绑定事件
$(".aaron:last").on('mousedown mouseup', function(e) {
$(this).text('触发类型:' + (e.type) + ",次数" + ++n)
// ++n;
})
//删除事件
$("button:last").click(function() {
$(".aaron:last").off()
})
</script>
</body>
</html>
