jQuery事件綁定

bind()

成都創(chuàng)新互聯(lián)專(zhuān)注于廣饒網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供廣饒營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，廣饒網(wǎng)站制作、廣饒網(wǎng)頁(yè)設(shè)計(jì)、廣饒網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)服務(wù)，打造廣饒網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供廣饒網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

bind()方法為一個(gè)元素綁定事件處理程序，有以下3種使用方法

bind(eventType[,eventData],handler(eventObject))

bind()方法可以接受3個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)或多個(gè)事件類(lèi)型的字符串，或自定義事件的名稱(chēng)；第二個(gè)參數(shù)是可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象；第三個(gè)參數(shù)是用來(lái)綁定的事件處理函數(shù)　

按鈕

一般用法

一般地，我們用bind()方法為元素綁定一個(gè)事件處理函數(shù)

按鈕

簡(jiǎn)化用法

jQuery庫(kù)提供了標(biāo)準(zhǔn)的事件類(lèi)型綁定快捷方法，比如bind('click')的快捷方法click()

每一種類(lèi)型都可以找到它的快捷方式

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

按鈕

命名空間

如果eventType參數(shù)字符串包含一個(gè)點(diǎn)(.)，那么該事件是帶命名空間的。這個(gè)點(diǎn)(.)將事件及其命名空間分隔開(kāi)來(lái)。例如，在調(diào)用.bind('click.name', handler) ，字符串click是事件類(lèi)型，而字符串name是命名空間。命名空間允許我們解除或綁定一些事件，而不會(huì)影響其他事件

[注意]即使是同類(lèi)型的事件，命名空間不同，就不會(huì)受到影響

按鈕

bind(eventType[,eventData],preventBubble)

bind()方法的第二種用法是第三個(gè)參數(shù)設(shè)置為false，用于防止默認(rèn)事件，阻止事件冒泡。默認(rèn)值是true

按鈕

bind(events)

bind()的第三種用法是只有一個(gè)參數(shù)，該參數(shù)是一個(gè)對(duì)象，包含一個(gè)或多個(gè)DOM事件類(lèi)型和函數(shù)并執(zhí)行它們　

按鈕

【unbind()】

unbind()是bind()事件的對(duì)應(yīng)事件，從元素上刪除一個(gè)以前附加的事件處理程序。每個(gè)用bind()方法綁定的事件處理程序可以使用unbind()移除

若unbind()方法沒(méi)有任何參數(shù)，可以刪除元素上所有綁定的處理程序

按鈕刪除事件

unbind()方法可以接收一個(gè)表示事件類(lèi)型的字符串，表示刪除該類(lèi)事件類(lèi)型的所有處理函數(shù)

按鈕刪除事件

unbind()方法也可以接受兩個(gè)參數(shù)，第一個(gè)參數(shù)表示事件類(lèi)型，第二個(gè)參數(shù)表示事件處理程序，表示刪除該事件類(lèi)型的該事件處理程序

按鈕刪除事件

[注意]如下用法是無(wú)法正常工作的。盡管兩個(gè)匿名函數(shù)的內(nèi)容是一樣的，但是它們是在不同的地方被創(chuàng)建的。因此，javascript會(huì)將它們當(dāng)成是不同的函數(shù)對(duì)象。若要解除綁定特定的事件處理函數(shù)，需要的是指向該函數(shù)的引用，而不是內(nèi)容相同的不同函數(shù)

按鈕刪除事件

命名空間

$( "#foo" ).bind( "click.myEvents", handler );

上面的click事件可以以正常的方式解除：

$( "#foo" ).unbind( "click" );

但是，如果要避免影響其他處理程序，可以更具體

$( "#foo" ).unbind( "click.myEvents" );

也可以解除命名空間中所有的處理程序，無(wú)論是什么事件類(lèi)型

$( "#foo" ).unbind( ".myEvents" );

事件對(duì)象

當(dāng)解除自身內(nèi)部處理程序時(shí)可以給unbind()方法傳遞event對(duì)象

按鈕

trigger()

trigger()方法用來(lái)完成模擬操作，根據(jù)綁定到匹配元素的給定的事件類(lèi)型執(zhí)行所有的處理程序和行為

trigger(eventType[,extraParameters])

trigger()方法接受兩個(gè)參數(shù)eventType和extraParameters。eventType表示事件類(lèi)型，而extraParameters是可選參數(shù)，表示傳遞給事件處理程序的額外數(shù)組參數(shù)

按鈕模擬按鈕

也可以直接用簡(jiǎn)化寫(xiě)法click()

按鈕模擬按鈕

可以使用on()方法定義一個(gè)自定義事件

按鈕

[注意]傳入的extraParameters參數(shù)與傳入到bind()方法中的eventData參數(shù)是不同的。它們的機(jī)制都是向事件處理函數(shù)中傳入信息，但是傳入trigger()中的extraParameters參數(shù)是在事件發(fā)生時(shí)傳入的，而傳入到bind()中的eventData參數(shù)要求在進(jìn)行事件綁定時(shí)就要事先計(jì)算好

trigger(event)

trigger()方法的另一種使用方法是傳入一個(gè)event對(duì)象

按鈕

【triggerHandler()】

triggerHandler()方法的行為與trigger()相似，不同之處有如下幾點(diǎn)：

1、triggerHandler()方法并不會(huì)觸發(fā)事件的默認(rèn)行為

2、trigger()會(huì)影響所有與jQuery對(duì)象相匹配的元素，而triggerHandler()僅影響第一個(gè)匹配到的元素

3、使用triggerHandler()創(chuàng)建的事件，并不會(huì)在DOM樹(shù)中向上冒泡。如果事件沒(méi)有被目標(biāo)元素直接處理，那么它就不會(huì)進(jìn)行任何處理

4、與普通的方法返回jQuery對(duì)象相反，triggerHandler()返回最后一個(gè)處理的事件的返回值。如果沒(méi)有觸發(fā)任何事件，會(huì)返回undefined

triggerHandler(eventType[,extraParameters])

triggerHandler()方法接受兩個(gè)參數(shù)eventType和extraParameters。eventType表示事件類(lèi)型，而extraParameters是可選參數(shù)，表示傳遞給事件處理程序的額外數(shù)組參數(shù)

如果使用trigger()觸發(fā)focus事件，那么它不只觸發(fā)綁定了該事件的處理函數(shù)，也會(huì)觸發(fā)瀏覽器默認(rèn)行為，即獲得焦點(diǎn)

如果使用triggerHandler()觸發(fā)focus事件，那么它只會(huì)觸發(fā)綁定了該事件的處理函數(shù)，而瀏覽器的默認(rèn)focus動(dòng)作是不會(huì)被觸發(fā)的

按鈕一按鈕二

delegate()

delegate()方法為所有匹配選擇器的元素綁定一個(gè)或多個(gè)事件處理函數(shù)，基于指定元素的子集，匹配的元素包括那些目前已經(jīng)匹配到的元素，也包括那些今后可能匹配到的元素

delegate(selector,eventType,eventData,handler(eventObject))

delegate()方法包含4個(gè)參數(shù)：selector表示選擇器字符串，用于過(guò)濾器觸發(fā)事件的元素；eventType表示一個(gè)包含一個(gè)或多個(gè)用空格隔開(kāi)的事件類(lèi)型的字符串，比如"click"或"keydown"或自定義事件的名稱(chēng)；eventData表示一個(gè)對(duì)象，它包含的數(shù)據(jù)鍵值對(duì)映射將被傳遞給事件處理程序；handler(eventObject)表示事件觸發(fā)時(shí)執(zhí)行的函數(shù)

按鈕

delegate(selector,events)

delegate()方法的另一種用法是傳遞兩個(gè)參數(shù)，selector參數(shù)表示選擇器字符串，用于過(guò)濾器觸發(fā)事件的元素；而events對(duì)象包含一個(gè)或多個(gè)DOM事件類(lèi)型和函數(shù)

按鈕

【undelegate()】

undelegate()方法用于刪除當(dāng)前選擇器匹配的所有元素的事件處理程序

1、 解除綁定所有事件

undelegate()

按鈕解綁事件

2、解除某一類(lèi)型事件

undelegate(eventType)

按鈕解綁事件

3、解除特定元素的事件

undelegate(selector,eventType)

按鈕解綁事件

4、解除特定元素綁定的對(duì)象函數(shù)的特定類(lèi)型的事件

undelegate(selector,eventType,handler(eventObject))

按鈕解綁事件

on()

on()方法是bind()方法和delegate()方法的升級(jí)版

on(events[,selector][,data],handler(eventObject))

on()方法接受4個(gè)參數(shù)

第一個(gè)參數(shù)event表示一個(gè)或多個(gè)空格分隔的事件類(lèi)型和可選的命名空間，或僅僅是命名空間，比如"click","keydown.myPlugin",或者".myPlugin"

第二個(gè)參數(shù)selector是可選參數(shù)，表示一個(gè)選擇器字符串，用于過(guò)濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是null或者忽略了該選擇器，那么被選中的元素總是能觸發(fā)事件

第三個(gè)參數(shù)data是可選參數(shù)，表示當(dāng)一個(gè)事件被觸發(fā)時(shí)，要傳遞給事件處理函數(shù)的event.data

第四個(gè)參數(shù)handler表示事件被觸發(fā)時(shí)，執(zhí)行的函數(shù)。若該函數(shù)只是執(zhí)行return false，那么該參數(shù)位置可以直接簡(jiǎn)寫(xiě)成 false

1、bind()寫(xiě)法

按鈕

2、delegate()寫(xiě)法

按鈕

on(events[,selector][,data])　

on()方法的另一種用法可以接受三個(gè)參數(shù)

第一個(gè)參數(shù)event表示一個(gè)對(duì)象，鍵是由一個(gè)或多個(gè)由空格分隔的事件類(lèi)型及可選的名字空間，值是這些事件類(lèi)型所對(duì)應(yīng)的事件處理函數(shù)

第二個(gè)參數(shù)selector和第三個(gè)參數(shù)data與上一種用法一樣，都是可選參數(shù)

按鈕

on()方法的最后一個(gè)參數(shù)不是函數(shù)，而是false時(shí)，表示取消默認(rèn)事件并取消事件冒泡

$("#btn").on("click", false)

只取消默認(rèn)事件

$("#btn").on("click", function(event) {
  event.preventDefault();
});

只取消冒泡

$("#btn").on("click", function(event) {
  event.stopPropagation();
});

【off()】

off()方法是on()方法對(duì)應(yīng)的解綁事件的方法

1、移除所有事件

按鈕一按鈕二

2、移除特定類(lèi)型的事件

按鈕一按鈕二

3、移除先前綁定的事件處理函數(shù)

按鈕一按鈕二

one()

對(duì)于只需要觸發(fā)一次，隨后就要立即解除綁定的情況，jQuery提供了一種簡(jiǎn)寫(xiě)方法——one()方法。one方法可以為元素綁定處理函數(shù)，當(dāng)處理函數(shù)觸發(fā)一次后，立即被刪除。即在每個(gè)對(duì)象上，事件處理函數(shù)只會(huì)被執(zhí)行一次

one()方法的結(jié)構(gòu)與on()方法類(lèi)似，使用方法也相同

按鈕

按鈕

 

本文名稱(chēng)：jQuery事件綁定
網(wǎng)頁(yè)地址：http://m.jiaotiyi.com/article/jdcdhh.html