jquery – 事件绑定的不同写法


编	写:袁	亮
时	间: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()
	
	

发表评论