本文以實(shí)例形式詳細(xì)匯總了jQuery中事件的用法，對jQuery的學(xué)習(xí)有很好的參考價(jià)值。分享給大家供大家參考之用。具體用法如下：

1.通過方法名給元素綁定事件：

$('li').click(function(event){})

2.通過bind方法給元素綁定事件：

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

可見，通過bind，可以給元素綁定多個(gè)事件。

3.事件的命名空間

為什么需要事件命名空間？

→假設(shè)，先給li元素綁定2個(gè)click事件。

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

→現(xiàn)在我們要把其中一個(gè)click事件注銷掉，可能這樣寫：

$('li').unbind('click')

但這樣，我們li所有的click事件都注銷了，這不是我們想要的。使用事件命名空間可解決這一問題，之所以需要事件命名空間，是因?yàn)樗鼮槲覀冊谧N事件的時(shí)候提供了方便。

如何使用事件命名空間？
→在為元素綁定事件的時(shí)候，在事件名稱后加上命名空間，符合格式：事件名稱.命名空間名稱。

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){}) 

→在注銷事件的時(shí)候，可以這樣寫：

$('li').unbind('click.editMode')

4.事件的種類

blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
moseover
mouseup
ready
resize
scroll
select
submit
unload

5.one方法

用于創(chuàng)建一次性事件，一旦這個(gè)事件執(zhí)行了一次后，就會被自動刪除。

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6.刪除事件

//先給元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件刪除
$("button").click(function(){
 $("p").unbind();
})

7.Event屬性

實(shí)際上，它是jquery的全局屬性，jQuery.Event。每當(dāng)觸發(fā)事件，Event對象實(shí)例就會被傳遞給Event Handler。

可以通過Event的構(gòu)造函數(shù)來創(chuàng)建事件，并觸發(fā)事件。

var e = jQueery.Event("click")
jQuery("body").trigger(e);

甚至可以通過構(gòu)造函數(shù)，把一個(gè)匿名對象放在Event中傳遞。

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

使用的時(shí)候，通過event.data.KeyCode來獲取匿名對象的值。

可以通過jQuery.Event的構(gòu)造函數(shù)把匿名對象放在Event中傳遞，不僅如此，通過事件也可以傳遞匿名對象。

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

可見，通過event.data可以獲取匿名對象的鍵。

通過Event對象實(shí)例，還可以拿到其它方面的信息，比如：

$("p").click(function(event){
 alert(event.target.nodeName);
})

以上，通過event.target.nodeName獲取觸發(fā)事件的元素名稱。

jQuery.Event的其它屬性包括：

altKey 如果alt鍵按下就為true，在Mac鍵盤中alt鍵標(biāo)記為Option
ctrKey ctrl鍵被按下
shiftKey Shift鍵被按下
currentTarget 冒泡階段的當(dāng)前元素
data
metaKey 一般Meta鍵是Ctrl，而Mac上是Command鍵
pageX 鼠標(biāo)事件時(shí)光標(biāo)相對于頁面原點(diǎn)的水平坐標(biāo)
pageY 鼠標(biāo)事件時(shí)光標(biāo)相對于頁面原點(diǎn)的垂直坐標(biāo)
relatedTarget 觸發(fā)鼠標(biāo)事件時(shí)光標(biāo)離開或進(jìn)入的元素
screenX 鼠標(biāo)事件時(shí)光標(biāo)相對于屏幕原點(diǎn)的水平坐標(biāo)
screenY 鼠標(biāo)事件時(shí)光標(biāo)相對于屏幕原點(diǎn)的垂直坐標(biāo)
result 從前面的事件處理器返回最近非undefined的值
target 觸發(fā)事件的元素
timestamp jQuery.Event創(chuàng)建實(shí)例時(shí)的時(shí)間戳，以毫秒為單位
type 事件類型，比如click
which 如果是鍵盤事件，代表按鍵的數(shù)字，如果是鼠標(biāo)事件，記錄按下的是左鍵、中鍵或右鍵

8.Event方法

event.preventDefault()阻止默認(rèn)行為
event.stopPropgation()停止"冒泡"，即停止沿著DOM向上進(jìn)一步傳播
event.stopImmediatePropagation()停止所有事件的進(jìn)一步傳播
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()

9.live方法和on方法

該方法允許我們?yōu)檫€不存在的元素創(chuàng)建事件。與bind方法不同的是：能為所有匹配的元素綁定事件，設(shè)置是那些暫時(shí)還不存在、需要?jiǎng)討B(tài)創(chuàng)建的元素。而且，live方法不一定要放在$(function(){})就緒處理器中。到了 jQuery 1.7以后，就改為on方法了。

$("p").on("click", function(){
 alert("hello");
})

如果想取消注冊事件：

$("button").click(function(){
 $("p").off("click");
})

10.trigger方法

當(dāng)我們想手動觸發(fā)元素綁定的事件時(shí)可以使用trigger方法。

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

還可以在綁定事件的時(shí)候出傳入形參，在trigger事件的時(shí)候傳入實(shí)參。

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);

trigger觸發(fā)由jQuery.Event創(chuàng)建的實(shí)例：

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

甚至可以在trigger觸發(fā)方法的時(shí)候傳入匿名對象：

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});

如果想停止觸發(fā)事件的傳播，可通過jQuery.Event實(shí)例的stopPropgation()方法，或在任何事件中返回false。

11.triggerHandler方法

triggerHandler方法與trigger方法的不同之處在于：triggerHandler方法不會執(zhí)行元素的默認(rèn)事件，也不會"冒泡"。

//給一個(gè)元素綁定一個(gè)focus事件
$("input").focus(function(){
 $("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler觸發(fā)
$("#id").click(function(){
 $("input").triggerHandler("focus");//不會觸發(fā)focus的默認(rèn)行為，即進(jìn)入文本框
})
//用trigger觸發(fā)
$("#id").click(function(){
 $("input").trigger("focus");//同時(shí)觸發(fā)foucs的默認(rèn)行為和綁定行為
})

12.事件冒泡和事件委托

什么是事件冒泡？

有這么一段代碼。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
 <div>
  <p><a href="#foo"><span>I am a Link!</span></a></p>
  <p><a href="#bar"><b><i>I am another Link!</i></b></a></p>
 </div>
</body>
</html>

現(xiàn)在，給該頁面所有的元素綁定click事件，包括window和document。

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });

當(dāng)單擊頁面任何元素，單擊事件會從當(dāng)前元素開始，向上一級元素傳播，直到最頂級元素，這里是window。

如何阻止事件冒泡？

顯然，通常只希望在某個(gè)特定元素發(fā)生特定的事件，不希望事件冒泡的發(fā)生。這時(shí)候我們可以針對某個(gè)特定元素綁定事件。

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });

以上，只為a綁定了click事件，無它。

如何有效利用事件冒泡？

在jquery中，事件委托卻很好地利用了事件冒泡。

<html>
<body>
<div id="container">
 <ul id="list">
  <li><a >Item #1</a></li>
  <li><a href="/local/path/1">Item #2</a></li>
  <li><a href="/local/path/2">Item #3</a></li>
  <li><a >Item #4</a></li>
 </ul>
</div>
</body>
</html>

現(xiàn)在，我們想給現(xiàn)有l(wèi)i中的a標(biāo)簽綁定事件，這樣寫：

$( "#list a" ).on( "click", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

但是，如果又在現(xiàn)有的ul中添加新的li和a，那情況又如何呢？

$( "#list" ).append( "<li><a >Item #5</a></li>" );

結(jié)果，點(diǎn)擊新添加的li中的a，什么都沒有發(fā)生。那么，如何為動態(tài)添加的元素綁定事件呢？

如果我們能把事件綁定到a的父級元素，那在父級元素內(nèi)生成的子級動態(tài)元素，也會有綁定事件的行為。

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

以上，我們把click事件綁定到a的父級元素id為list的ul上，on方法中的第二個(gè)參數(shù)，這里是a，是事件真正的執(zhí)行者。具體過程如下：
→點(diǎn)擊某個(gè)a標(biāo)簽
→根據(jù)事件冒泡，觸發(fā)了a的父級元素ul的click事件
→而事件真正的執(zhí)行者是a

事件委托允許我們把事件綁定到父級元素，這相當(dāng)于給所有的子級元素綁定了事件，不管這個(gè)子級元素是靜態(tài)的、還是動態(tài)添加的。

13.toggle方法

允許我們依次執(zhí)行多個(gè)事件，當(dāng)執(zhí)行完最后一個(gè)事件后，再執(zhí)行第一個(gè)事件。

$('img[src*=small]').toggle({
 function(){},
 function(){},
 function(){}
});

14.mouseenter和mouseleave方法

$(element).mouseenter(function(){}).mouseleave(function(){})

15.hover方法

$("p").hover(function(){
 $("p").css("background-color","yellow");
 },function(){
 $("p").css("background-color","pink");
});

相信本文所述對大家的jQuery程序設(shè)計(jì)有一定的借鑒價(jià)值。

最新評論