jQuery事件绑定分析

jQuery交互经常使用,但是没有对其绑定方法做过总结,现在总结一下常用事件绑定方法:
1、on
jQuery1.7之后推荐的绑定事件方法。既能对已存在元素绑定事件,又能对动态生成元素绑定事件。
使用方法:
a)父元素.on([子元素选择器],事件,操作方法)—-能对动态生成元素绑定事件
b)元素.on(事件,操作方法)—-只对已存在元素绑定事件
2、bind
只能对已存在元素绑定事件,动态生成的元素用此方法绑定事件无效。
使用方法:
元素.bind(事件,操作方法)
3、delegate
采用事件委托概念,不是直接为元素而是为其父元素绑定事件。在元素上进行操作时,事件会一层层冒泡直到到达实际绑定事件的元素。
使用方法:
父元素.delegate([子元素选择器],事件,操作方法)
4、live
jQuery1.7之前能使用,jQuery1.7之后被on方法取代。
使用方法:
元素.live(事件,操作方法)
使用live和delegate,事件被绑定到元素的一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。所以适用于动态生成的元素事件绑定。
当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。
delegate和bind方法内部都是基于on方法实现的,只是传递参数不同,所以这两个方法都能由on来取代。
下面的例子可以证明:

<html>
<head>
	<title>{%$title%}</title>
	<script src="/static/jquery-1.9.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/demo1.css">
</head>
<body>
	<button class="test1">提交1</button>
	<button class="test2">提交2</button>
	<button class="test3">提交3</button>
	<button class="test4-1">提交4——1</button>
	<button class="test4-2">提交4——2</button>
	<button class="test5-1">提交5——1</button>
	<button class="test5-2">提交5——2</button>
	<button class="test5-3">提交5——3</button>
	<button class="test6">提交6</button>
<script type="text/javascript">
	//动态生成元素事件绑定:click
	$(".test1").click(function(){
		$("body").append('<button class="click">click</button>');
	});
	$(".click").click(function(){
		$("body").append('<div class="test11">click实现</div>');
	});

	//动态生成元素事件绑定:onclick
	$(".test2").click(function(){
		$("body").append('<button class="onclick">onclick</button>');
	});
	$(".onclick").onclick = function(){
		$("body").append('<div class="test21">onclick 实现</div>');
	};

	//动态生成元素事件绑定:bind
	$(".test3").click(function(){
		$("body").append('<button class="bind">bind</button>');
	});
	$(".bind").bind('click',function(){
		$("body").append('<div class="test31">bind实现</div>');
	});

	//动态生成元素事件绑定:on1
	$(".test4-1").click(function(){
		$("body").append('<button class="on1">on1</button>');
	});
	$(".on1").on('click',function(){
		$("body").append('<div class="test4-11">on1实现</div>');
	});

	//动态生成元素事件绑定:on2
	$(".test4-2").click(function(){
		$("body").append('<button class="on2">on2</button>');
	});
	$("body").on('click','.on2',function(){
		$("body").append('<div class="test4-21">on2实现</div>');
	});

	//动态生成元素事件绑定:delegate-1
	$(".test5-1").click(function(){
		$("body").append('<button class="delegate-1">delegate-1</button>');
	});
	$(".delegate-1").delegate('click',function(){
		$("body").append('<div class="test5-11">delegate-1实现</div>');
	});

	//动态生成元素事件绑定:delegate-2
	$(".test5-2").click(function(){
		$("body").append('<button class="delegate-2">delegate-2</button>');
	});
	$("body").delegate('click','.delegate-2',function(){
		$("body").append('<div class="test5-21">delegate-2实现</div>');
	});

	//动态生成元素事件绑定:delegate-3
	$(".test5-3").click(function(){
		$("body").append('<button class="delegate-3">delegate-3</button>');
	});
	$("body").delegate('.delegate-3','click',function(){
		$("body").append('<div class="test5-31">delegate-3实现</div>');
	});

	//动态生成元素事件绑定:live
	$(".test6").click(function(){
		$("body").append('<button class="live">live</button>');
	});
	$(".live").live('click',function(){
		$("body").append('<button class="test61">test61</button>');
	});//报错:Uncaught TypeError: $(...).live is not a function
</script>
</body>
</html>


可以看到live方法在jQuery1.9中已经不能使用,只有delegate方法以及on方法能实现对事件的绑定,注意写法。

此条目发表在PHP, 移动端分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注