JavaScript加强之自定义event

$().ready(function(){
	for(var i=0;i<5;i++){
		/**
		 * 这种写法不专业,jquery的事件是会叠加的,如果处于循环里,就会注册5次事件,点击后alert5次
		 */
//		$("#aa").click(function(){
//			alert("hahahaha");
//		});
		/**
		 * 这种写法才是专业的,在注册一次点击事件前,先解绑点击事件,然后再绑定一个点击事件,所以到最后只绑定了一次点击事件
		 */
		$("#aa").unbind("click");
		$("#aa").bind("click",function(){
			alert("oooooo");
		});
	}
});

自定义事件:

$().ready(function(){
	/**
	 *	自定义事件,在click的时候进行触发 
	 */
	$("#aa").bind("click",function(){
		//事件触发器,触发自定义的event
		$(this).trigger("点我");
	});
	//自定义一个"点我"事件
	$("#aa").unbind("点我");
	$("#aa").bind("点我",function(){
		alert("点我");
	});
});

传递参数的自定义事件:

$().ready(function(){
	/**
	 *	自定义事件,在click的时候进行触发 
	 */
	$("#aa").bind("click",function(){
		//事件触发器,触发自定义的event,传递实参
		$(this).trigger("点我",['张三','李四']);
	});
	//自定义一个"点我"事件
	$("#aa").unbind("点我");
	//第一个参数是固定的,后面都是自定义,就算把event写成别的名字,它还是固定类型,鼠标事件
	$("#aa").bind("点我",function(event,a,b){
		alert("点我");
		alert(a);
		alert(b);
	});
});

练习:

写一个自定义事件,把该事件绑定在一个下拉列表框中

当下拉列表框选中一项的时候,触发该事件,以参数的形式把选中的值传递到自定义事件中,并输出。

html:

<select id="select">
	<option value="111">111</option>			
	<option value="222">222</option>			
	<option value="333">333</option>			
</select>

js:

$().ready(function(){
	$("option").unbind("click");
	$("option").bind("click",function(){
		$(this).trigger("选择并显示",[$(this).val()]);
	});
	
	$("option").unbind("选择并显示");
	$("option").bind("选择并显示",function(event,value){
		alert(value);
	});
	
});