資訊專欄INFORMATION COLUMN
摘要：但是如果你不知道這個(gè)函數(shù)的名字，或者你用的是匿名函數(shù)怎樣才能精確地解綁某一個(gè)事件監(jiān)聽(tīng)器呢該了解一下的事件命名空間了先上代碼這里不只是把事件作為參數(shù)傳入方法，而是給事件指定了一個(gè)命名空間，然后監(jiān)聽(tīng)了這個(gè)命名空間里的事件。
用 jQuery 綁定和解綁事件監(jiān)聽(tīng)器都是非常簡(jiǎn)單的。但是當(dāng)你為一個(gè)元素的一個(gè)事件綁定了多個(gè)監(jiān)聽(tīng)器時(shí)，怎樣精確地解綁其中一個(gè)監(jiān)聽(tīng)器？我們需要了解一下事件的命名空間。
看下面這段代碼：
$(“#element”)
.on(“click”, doSomething)
.on(“click”, doSomethingElse);
像上面這樣綁定事件監(jiān)聽(tīng)器，當(dāng)元素被點(diǎn)擊時(shí)，doSomething 和 doSomethingElse 這兩個(gè)監(jiān)聽(tīng)器都會(huì)被觸發(fā)。這是使用 jQuery 的一個(gè)便利之處，可以隨時(shí)給元素的同一個(gè)事件添加不同的監(jiān)聽(tīng)器。不像用 onclick 那樣，新的監(jiān)聽(tīng)器會(huì)覆蓋舊的。
如果你想解綁其中一個(gè)監(jiān)聽(tīng)器，比如 doSomething，怎么做呢？
是這樣嗎？
$(“#element”).off(“click”);
注意！上面這行代碼會(huì)把元素的 click 事件的所有監(jiān)聽(tīng)器全部解綁，而這并不是我們要的結(jié)果。
幸運(yùn)的是 jQuery 的 .off() 方法可以接受第二個(gè)參數(shù)，就像 .on() 一樣。只要把監(jiān)聽(tīng)器函數(shù)的名字作為第二個(gè)參數(shù)傳入 .off() 方法，就能夠解綁指定的監(jiān)聽(tīng)器。
$(“#element”).off(“click”, doSomething);
但是如果你不知道這個(gè)函數(shù)的名字，或者你用的是匿名函數(shù)：
$(“#element”)
.on(“click”, function() {
console.log(“doSomething”);
});
怎樣才能精確地解綁某一個(gè) click 事件監(jiān)聽(tīng)器呢？該了解一下 jQuery 的事件命名空間了！
先上代碼：
$(“#element”)
.on(“click.myNamespace”, function() {
console.log(“doSomething”);
});
這里不只是把 click 事件作為參數(shù)傳入 .on() 方法，而是給 click 事件指定了一個(gè)命名空間，然后監(jiān)聽(tīng)了這個(gè)命名空間里的 click 事件。此時(shí)，即使監(jiān)聽(tīng)器是匿名函數(shù)，實(shí)際上它也是“有名”的了。現(xiàn)在你可以像下面這樣解綁某一個(gè)具體的命名空間里的事件監(jiān)聽(tīng)器了。
$(“#element”).off(“click.myNamespace”);
這是 jQuery 為我們提供的又一個(gè)方便而強(qiáng)大的功能，它的內(nèi)部實(shí)現(xiàn)肯定很有意思！
編譯自：CSS-Tricks
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/77952.html
摘要：文件命名需要使用的庫(kù)該庫(kù)已經(jīng)兩年未更新了，不過(guò)依舊在回復(fù)中，對(duì)于庫(kù)的檢查，已經(jīng)完全測(cè)試通過(guò)一個(gè)栗子，日期選擇將為中的元素統(tǒng)統(tǒng)替換為日期選擇組件 使用jQuery處理事件 事件處理 一個(gè)栗子，單擊p時(shí)背景變成灰色 由于es6的箭頭函數(shù)不支持this的綁定，所以無(wú)法使用箭頭函數(shù)，只能使用匿名函數(shù) html hello world js // 單擊...
摘要：傳遞一個(gè)可拓展的默認(rèn)對(duì)象參數(shù)而不是大量的參數(shù)給插件。始終命名空間的方法，事件和數(shù)據(jù)。 jq--CDN jQ -- jQuery源碼解析 1、jQuery.extend() 與 jQuery.fn.extend()把jQuery看成一個(gè)封裝js類 這樣好理解$.extend是擴(kuò)展的jQuery這個(gè)類 為jQuery類添加類方法 可以理解為靜態(tài)方法 只跟這個(gè)類本身有關(guān) 跟具體的實(shí)例化對(duì)象是...
摘要：十的觸發(fā)機(jī)制被點(diǎn)擊了元素本身綁定了一個(gè)事件，但是是原生事件，它是靠綁定來(lái)觸發(fā)事件的。 showImg(https://segmentfault.com/img/remote/1460000019505402); 前言：最重要的還是最后的流程圖，可以試著根據(jù)流程圖手寫(xiě)實(shí)現(xiàn)$().on()，下篇文章會(huì)放出模擬實(shí)現(xiàn)的代碼。 一、舉例 這是A 這是C ...
摘要：回調(diào)隊(duì)列中的元素是對(duì)象，代表一個(gè)事件回調(diào)，擁有多個(gè)屬性，如等等，其中是回調(diào)函數(shù)，在觸發(fā)時(shí)通過(guò)傳遞，具體的在后面講。類型是時(shí)鍵表示事件名，規(guī)則同上，鍵值表示事件觸發(fā)時(shí)的回調(diào)函數(shù)。 jQuery源碼學(xué)習(xí)之event jQuery的事件機(jī)制為異步回調(diào)，事件監(jiān)聽(tīng)的屬性、參數(shù)和回調(diào)的等保存在Data實(shí)例中，在元素上保存該對(duì)象的引用。有方法handle，內(nèi)部執(zhí)行dispatch；有屬性events...
閱讀 2639·2021-11-25 09:43
閱讀 2743·2021-11-04 16:09
閱讀 1661·2021-10-12 10:13
閱讀 891·2021-09-29 09:35
閱讀 894·2021-08-03 14:03
閱讀 1786·2019-08-30 15:55
閱讀 3004·2019-08-28 18:14
閱讀 3503·2019-08-26 13:43
