事件綁定
第一種方式:直接使用事件名
例:$("#btn").click(function(){? alert(1) })
第二種方式:on(event,function)
例:$('#btn').on('click', function(){ alert(2);})
第三種方式:bind(event, function)
例:$('#btn').bind('click', function(){alert(3);})
第四種方式:利用事件監(jiān)聽(tīng)來(lái)綁定事件
事件移除
.off():通常用于移除通過(guò)on方法綁定的事件
?例: $("p").off("click");
2.unbind():移除被選元素的事件
?例: $("p").unbind();
鼠標(biāo)事件
1:mouseover? ? 鼠標(biāo)移入(支持事件冒泡)
2:mouseout? ? 鼠標(biāo)移出? (支持事件冒泡)
3.mouseleave? 鼠標(biāo)移出(不支持事件冒泡)
4.mouseenter? 鼠標(biāo)移入 (不支持事件冒泡)
5:mousedown? 鼠標(biāo)按下
6:mouseup? ? ? 鼠標(biāo)抬起
7:mousemove? 鼠標(biāo)移動(dòng)
8:click? ? ? ? ? ? ? 鼠標(biāo)單擊
9:dbclick? ? ? ? ? 鼠標(biāo)雙擊
10:contextmenu? 鼠標(biāo)右鍵
鍵盤(pán)事件
keydown 鍵盤(pán)按下
keyup 鍵盤(pán)抬起
表單事件
blur 失去焦點(diǎn)事件
focus 獲取焦點(diǎn)事件
change 內(nèi)容發(fā)生改變
submit 表單提交事件
復(fù)合事件
hover方法規(guī)定當(dāng)鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)玫膀。
例:? $("p").hover(function(){
$("p").css("backgroundColor","yellow");
},function(){
$("p").css("backgroundColor","pink");
});
事件對(duì)象屬性
Jquery對(duì)事件屬性進(jìn)行了封裝使事件處理在各瀏覽器下不需要判別類型都能正常運(yùn)行碘菜。
event.type
該屬性用于獲得觸發(fā)該事件的類型檬姥,對(duì)引發(fā)事件的不同操作栓霜,返回不同結(jié)果
例:$("p").click(function(event){alert(event.type);});
該示例返回元素p單機(jī)事件的事件類型匕争,結(jié)果打印是'click'渊啰。
event.target
該屬性用于獲得觸發(fā)事件的元素
例:
$("p, button, h1").click(function(event){
$("div").html("通過(guò)" + event.target.nodeName + "元素觸發(fā)");
});
event.pageX 和 event.pageY
用這兩個(gè)屬性可以獲得鼠標(biāo)的相對(duì)于頁(yè)面的當(dāng)前位置
例:
$(“p").click(function(event){
alert("current mouse location "+event.pageX+" “+event.pageY);
});
event.preventDefault()
阻止默認(rèn)事件
例: $("a").click(function(event){event.preventDefault();});
使用該屬性阻止元素a的默認(rèn)跳轉(zhuǎn)行為。
event.stopPropagation()
阻止事件冒泡
例:
$('div').click(function(event){
alert('里層點(diǎn)擊');
event.stopPropagation();
});
使用stopPropagation()方法阻止div的父元素的click事件被觸發(fā)捂齐。
事件委托
事件委托:通俗的講蛮放,事件就是onclick,onmouseover奠宜,onmouseout包颁,等就是事件,委托呢挎塌,就是讓別人來(lái)做徘六,這個(gè)事件本來(lái)是加在某些元素上的,然而你卻加到別人身上來(lái)做榴都,完成這個(gè)事件待锈。
原理:利用冒泡的原理,把事件加到父級(jí)上嘴高,觸發(fā)執(zhí)行效果竿音。
好處:減少事件注冊(cè),提高性能拴驮。
delegate()
定義和用法:delegate() 方法為指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序春瞬,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
語(yǔ)法:$(selector).delegate(childSelector,event,data,function)
最新on方法取替了delegate方法
事件命名空間
事件添加命名空間便于事件的管理:刪除事件和觸發(fā)事件套啤。例:
元素綁定多個(gè)事件
$("div").bind("click.plugin",function(){alert("click.plugin");}); $("div").bind("click",function(){alert("click");}); $("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");}); $("div").bind("dbclick",function(){alert("dbclick");});
由于使用了命名空間宽气,可以刪除指定命名空間中的事件,如移除所有plugin命名空間下的事件函數(shù)方法如下:
$(“button”).click(function(){$("div").unbind(".plugin");});
這樣就移除了所有命名空間是plugin的事件函數(shù)潜沦。div中就只剩下click和dbclick綁定事件萄涯。