資訊專欄INFORMATION COLUMN
摘要：一種做法是在事件處理程序中使用條件語(yǔ)句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕后，所有的事件的處理程序又被重新綁定回來(lái)。
如果我們需要移除已經(jīng)注冊(cè)的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語(yǔ)句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。
移除處理程序假設(shè)有個(gè) div 和 button，當(dāng)我們點(diǎn)擊 button 時(shí)即改變 div 的背景色，當(dāng)如果我們點(diǎn)擊 div 本身則移除 button 上的 click 事件處理程序。
樣式：
div {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.blue {
background-color: blue;
}
jQuery 代碼：
$("button").click(function() {
$("div").addClass("blue");//添加樣式
});
$("button").click(function() {
alert("change color!");
});
$("div").click(function() {
$("button").off("click");
});
這里為了區(qū)分兩個(gè)不同的處理程序，特意將 addClass 和 alert 過(guò)程分開(kāi)來(lái)寫(xiě)。
當(dāng)直接點(diǎn)擊 button 按鈕時(shí)，div 背景色發(fā)生改變，同時(shí)彈出 alert 框。
如果我們提前點(diǎn)擊 div 后，使用 .off() 方法移除 button 按鈕上的 click 事件處理程序。 此時(shí)再點(diǎn)擊 button 按鈕，click 事件處理程序不再生效。
移除特定的處理程序在上例中，使用 off 方法移除了 button 按鈕 click 事件內(nèi)的所有的處理程序，但如果我們只想移除改變背景色的處理程序，同時(shí)保留 alert 處理程序的話，就需用使用事件命名空間。
事件命名空間其實(shí)就是在綁定事件處理程序時(shí)加入一些附加信息，用來(lái)識(shí)別特定的處理程序。
這里需要使用 .on() 方法。
使用 on 方法修改上例中的 jQuery 代碼如下：
$("button").on("click.changeBgColor", function() {
$("div").addClass("blue");
});
$("button").on("click.justAlert", function() {
alert("I want to change color!");
});
$("div").click(function() {
$("button").off("click.changeBgColor");
});
第一個(gè)事件處理程序我們添加附加信息，命名為 changeBgColor，第二個(gè)則命名為 justAlert。當(dāng)點(diǎn)擊 button 按鈕后我們只移除 changeBgColor 相關(guān)的事件處理程序。
此時(shí)先點(diǎn)擊 div 后，再點(diǎn)擊 button，背景色改變失效，但 alert，仍然生效。
我們添加一個(gè) default 按鈕，當(dāng)點(diǎn)擊 default 按鈕后，所有的事件的處理程序又被重新綁定回來(lái)。為了能重復(fù)使用事件處理程序過(guò)程，我們需要使用一個(gè)匿名函數(shù)表達(dá)式來(lái)將其賦值給一個(gè)局部變量。
添加一個(gè) default 按鈕：
修改 jQuery 代碼如下：
var changeBgColor = function() {
$("div").addClass("blue");
};
var justAlert = function() {
alert("I want to change color!");
};
$("button#change").on("click.changeBgColor", changeBgColor);
$("button#change").on("click.justAlert", justAlert);
$("div").click(function() {
$("button#change").off("click.changeBgColor");
});
$("button#default").click(function() {
$("button#change").on("click", changeBgColor);
});
此時(shí)，如果我們先點(diǎn)擊 div 后，再點(diǎn)擊 change 按鈕，修改背景色失效，但如果我們?cè)冱c(diǎn)擊 default 按鈕，修改背景色的事件處理程序被重新綁定到 change 按鈕的 click 事件中。
參考http://book.douban.com/subject/24669823/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78166.html
摘要：我們可以利用可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。其他類(lèi)似的操作事件都可以通過(guò)這個(gè)方法，將處理事件的程序綁定到同名事件上面。 我們可以利用 jQuery 可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。 增添樣式 基于用戶的事件，對(duì)特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見(jiàn)的情形，舉例說(shuō)明，當(dāng)用戶點(diǎn)擊輸入框后，會(huì)增添 highli...
摘要：是如何決定由哪個(gè)元素來(lái)處理事件的，以及又是如何優(yōu)化處理這個(gè)問(wèn)題的，這些都涉及到了事件傳播。事件冒泡的弊端事件冒泡可能會(huì)導(dǎo)致意料之外的行為，例如在響應(yīng)事件時(shí)，依舊是上例，當(dāng)為最外層的添加一個(gè)事件。使用方法可以避免事件傳播導(dǎo)致的問(wèn)題。 Javascript 是如何決定由哪個(gè)元素來(lái)處理事件的，以及 jQuery 又是如何優(yōu)化處理這個(gè)問(wèn)題的，這些都涉及到了事件傳播。 事件傳播策略 當(dāng)頁(yè)面內(nèi)...
摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...
摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...
摘要：原生事件綁定所謂的移除事件處理函數(shù)指的是對(duì)于給定的元素和事件類(lèi)型，處理程序在第一次觸發(fā)事件后會(huì)被立即解除綁定。如果為表示事件執(zhí)行之后會(huì)自動(dòng)移除綁定。標(biāo)準(zhǔn)事件事件綁定提供了一個(gè)方法實(shí)現(xiàn)只綁定一次的事件。已同步到個(gè)人博客只執(zhí)行一次的事件綁定函數(shù) 概覽 在前端開(kāi)發(fā)中，有時(shí)會(huì)希望事件只被調(diào)用一次。比如，點(diǎn)擊一張縮略圖加載視頻文件或點(diǎn)擊更多圖標(biāo)通過(guò)AJAX展示額外的內(nèi)容。當(dāng)多次點(diǎn)擊的時(shí)候，事件處...
閱讀 2619·2023-04-26 00:57
閱讀 974·2021-11-25 09:43
閱讀 2287·2021-11-11 16:55
閱讀 2364·2019-08-30 15:53
閱讀 3657·2019-08-30 15:52
閱讀 1530·2019-08-30 14:10
閱讀 3435·2019-08-30 13:22
閱讀 1265·2019-08-29 11:18
