编 写：袁 亮
时 间：2015-11-16
说 明：jquery事件绑定
一、作用
1、将html显示与js动态交互分离，不在html中写一堆的onclick等js
2、简化代码，统一处理，防止遗漏以及重复写，比如ajax请求等
3、结构清晰，分层，html，css，js等独立
二、如何绑定事件
1、bind：向匹配元素添加一个或多个事件处理器
1.1 所有jquery版本均支持，但1.7版本后，推荐使用on
1.2 只能对已经存在的元素进行事件绑定
1.3 了解即可，不使用
2、live:向当前或未来的匹配元素添加一个或多个事件处理器
2.1 jquery 1.9版本以上，已经删除
2.2 使用on来代替
3、delegate：为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
3.1 jquery 1.4以上版本支持
3.2 1.7以下版本的时候可以考虑使用，旧项目，新项目使用不要使用
4、on【重点】:为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
4.1 jquery 1.7以上版本支持
4.2 尽量使用这个，不要使用其他三种绑定
三、简单例子
$("选择器").on({
click:function(){
console.log("我是"+$(this));
console.log("点击触发");
},
mouseout:function(){
console.log("我是"+$(this));
console.log("鼠标触发");
}
},"子选择器(可选)");
四、常见问题(1.72版本jquery下测试)
1、元素后加载，事件绑定不成功
1.1 示范代码
<code>
<div class="test">你好</div>
<script type="text/javascript">
$(function(){
//a标签事件绑定
$(".test a").on({
click:function(){
console.log("click");
}
});
//后加载生成dom节点
$(".test").prepend("<a>测试连接</a><hr>");
});
</script>
</code>
1.2 因为a标签是后加载的元素，在绑定事件的时候，dom数上还没有该元素，因此绑定失败
2、解决办法1
2.1 事件绑定在已经存在的父元素上，匹配选择器是否符合
2.2 示例代码
<code>
<div class="test">你好</div>
<script type="text/javascript">
$(function(){
//后加载生成dom节点
$(".test").prepend("<a>测试连接</a><hr>");
//a标签事件绑定
$(".test").on({
click:function(){
console.log("click");
}
},"a");
});
</script>
</code>
2.3 优点：绑定事件与处理逻辑脱离，代码更简单易懂
2.4 缺点：需要注意选择器必须是已经存在的节点，子选择器可以是后加载的元素，不清楚的话，可以直接绑定在document上
iphone下，会出问题，元素需要添加cursor: pointer;样式，手机使用，不采用这个
3、解决办法2
3.1 在元素加载后，执行绑定函数
3.2 实例代码
<code>
<div class="test">你好</div>
<script type="text/javascript">
$(function(){
$(".test").prepend("<a>测试连接</a><hr>");
$(".test a").on({
click:function(){
console.log("click");
}
});
});
</script>
</code>
3.3 优点：各种情况都兼容，不会出现绑定失败
3.4 缺点：代码可能不是那么好看，绑定事件混在了处理逻辑中
五、使用建议
1、使用1.7以上版本jquery，2.0以下（不兼容ie8及以下版本）
2、绑定事件均使用on来绑定，不要使用其他的
3、对于后加载元素，在加载完成之后进行事件绑定，避免兼容性问题
六、原理，额外拓展，dom树结构（了解即可）
1、可以使用off来取消事件绑定
2、可以使用.one，只绑定一次，触发之后就取消绑定
3、页面dom数结构
4、事件如何冒泡
附参考文档：
1、浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
2、jQuery三种事件绑定方式.bind(),.live(),.delegate()