jQuery事件机制

jQuery事件机制

事件的注册

• 普通的注册简单的事件，缺点只能注册一个事件

    $("p").click(function(){
    	alert("简单的事件");
    }) 
  

• bind方式注册事件

    $("p").bind({
    	click:function(){
    		alert('这是bind的click事件');
    	},
    	mouseenter:function(){
    		alert('这是bind的mouseenter事件');
    	}
    })
  

• 委托事件 delegate

    $("div").delegate("p","click",function(){
    	alert("这是一个委托事件");
    })
  

要给div注册一个委托事件，但是最终不是div执行的，而是p执行。

第一个参数指明事件由谁来执行。

第二个参数是事件的类型

第三个从参数，函数

• 发展到on事件,既可以委托，又可以做普通事件

    $("div").on("click","p",function(){
    	alert("on的委托事件");
    })
    $("#btm").on("click",function(){
    	alert("你点击的是on的普通事件");
    })
  

一般建议用on来注册事件，如果是用jq动态添加元素，而元素又有事件，那么要使用委托事件才能使元素带有事件。

事件的解绑

• unbind方式（一般不用）

    $(selector).unbind();//解绑所有事件
    $(selector).unbind("click");//解绑指定事件
  

• undelegate(一般不用了)

    $(selector).undetegate();
    $(selector).undetegate();
  

• off推荐使用的方式

    $(selector).off();//解绑所有事件
    $(selector).off("click");//解绑指定事件
  

触发事件

$("#btn").on("click",function(){
	$("p").click();
	$("p").trigger("click");
})

阻止冒泡事件

$("a").on("click",function(e){
	alert("onclick");
	//return false;     //阻止浏览器默认行为和事件冒泡
	e.preventDefault(); //阻止浏览器默认行为
	e.stopPropagation();//阻止冒泡
})