事件基础
绑定事件
注：在事件处理函数中要通过event对象来访问data属性，见on方法的例子
1、bind()
bind()方法为匹配元素添加一个或多个事件处理器
bind(event,data,function)
event：必须参数，添加到元素的一个或多个事件
单事件处理：如$(selector).bind(‘click’,data,function)
多事件处理：
1、需要使用空格分隔多个事件，如$(selector).bind(‘click mouseout’,data,function)，这种方式比较死板，适合多个事件调用同一函数的情况
2、大括号语法灵活定义多个事件，如$(selector).bind({event1:function,event2:function})，可以给事件单独绑定函数
data：可选参数，设计需要传递的参数
function：必须参数，当绑定事件发生时，需要执行的函数
例：使用bind为按钮绑定事件的几种方式
<body>
<button type="button" class="btn-test">按钮</button>
<div class="container">
<img src="../img/02.jpg" style="width: 300px;height: 200px;">
</div>
<script type="text/javascript">
$(function() {
/* 添加单个事件处理 */
/* $('.btn-test').bind('click',function(){
$('.container').slideToggle();
}) */
/* 添加多个事件处理 */
/* $('.btn-test').bind('click mouseout',function(){
$('.container').slideToggle();
}) */
/* 添加多个事件处理*/
$('.btn-test').bind({
'click': function() {
$('.container').slideToggle();
},
'mouseout': function() {
alert('这是鼠标移出事件')
}
})
})
</script>
</body>
注： bind()方法适合所有版本，jQuery1.7以后，推荐使用on()方法代替
2、 live()
live()方法为当前或未来的匹配元素添加一个或多个事件处理程序，
特点：由脚本创建的新元素也会拥有该事件
live(event,data,function)
参数说明与bind相同
注： jQuery1.9及以上删除了该方法，用on()方法来代替
3、delegate()
delegate()方法为指定的元素，以及被选元素的子元素，添加一个或多个事件处理程序。该方法使用于当前或未来的元素，
特点：由脚本创建的新元素也会拥有事件
delegate(childSelector,event,data,function)
参数说明：
childSelector：必须参数，指定需要注册事件的元素，一般为调用对象的子元素（直接写元素标签名，否则会出问题）
event：必须参数，添加到元素的一个或多个事件
data：可选参数，设计需要传递的参数
function：必须参数，当绑定事件发生时，需要执行的函数
注： 该方法适合jQuery1.4.2及以上及版本3以下
例：设计一个项目列表，当单击按钮时，可以动态添加列表项目，使用delegate()方法为每个li标签绑定click事件，单击时将弹出该列表项目包含的文本（新添加的列表项也要拥有click事件）
<body>
<button id="btn">添加列表项目</button>
<ul id="list">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ul>
<script type="text/javascript">
$(function() {
$('#list').delegate('li', 'click', function() {
alert(this.innerHTML)
})
$('#btn').click(function() {
$('#list').append('<li>列表项目' + ($('#list').children().length + 1) + '</li>')
})
})
</script>
</body>
4、on()
on(event,childSelector,data,function)
event：必须参数项；childSelector：可选参数项；data：可选参数项；function：必须参数项
on()方法是jQuery1.7及以上用于替代bind、live、delegate的方法
例：如何向事件处理函数传递数据
<body>
<button>输出</button>
<script type="text/javascript">
$(function() {
$('button').on('click', {
'a': 'A',
'b': 'B'
}, function(event) { //通过event对象来访问data属性
alert(event.data.a + event.data.b)
})
})
</script>
</body>
总结：
1、都支持单元素多事件的绑定，都支持空格相隔方式或者大括号替代方式
2、均是通过事件冒泡方式，将事件传递到document进行事件的响应
3、如果项目中引用jQuery为低版本，推荐使用delegate()，高版本可以使用on()，jQuery3+版本中只支持on()
绑定一次性事件
one()是on()的一个特例，用法与bind()完全相同，但是它绑定的事件在执行一次响应之后就会失效
one(event,[data],function)
注销事件
jQuery提供了四种事件绑定方式：bind()、live()、delegate()、on()，对应的注销事件分别为：unbind()、die()、undelegate()、off()
注销方法与注册方法是相反操作，参数和用法基本相同。它们能够从没一个匹配的元素中删除绑定的事件。如果没有指定参数，则删除所有绑定的事件，包括注册的自定义事件
