jQuery綁定事件的覆蓋

CodeSheep 發布于2019-08-21 10:37 / 448人閱讀

摘要：中，事件的綁定是疊加式，而不是很多人想象的覆蓋式。而很多時候，我們希望執行某函數做出某些判斷之后，為元素重新綁定事件，而不是同時保留多個事件監聽。

ECMAscript中，事件的綁定是疊加式，而不是很多人想象的覆蓋式。如：

$("button").click(function(){
    alert("first");
});
$("button").click(function(){
    alert("second");
});

點擊button之后，會先彈出first彈出框，再彈出second彈出框（而不是只彈出second彈出框）。

而很多時候，我們希望執行某函數、做出某些判斷之后，為元素重新綁定事件，而不是同時保留多個事件監聽。（比如：輸入密碼之前，點擊“登錄”提示“輸入密碼”，密碼驗證成功后點擊“登錄”提示“登錄成功”）

下面介紹兩種方法可以實現綁定事件覆蓋效果：
(我要來秀我的成語水平了，前方高能，非戰斗人員迅速撤離)

1.起死回生法

$("button").die().live("click",function(){
//新的綁定事件
});

先使用die()方法移除所有通過live()方法向元素添加的事件處理程序,再通過live()方法綁定新的事件。
這種方法有個前提，那就是被覆蓋的方法也必須是通過live()方法綁定的，否則die()方法“殺不死”它們，會完全沒有效果。

2.欲擒故縱法

$("button").unbind("click").click(function(){
//新的綁定事件
});

和第一種方法類似，先使用unbind()方法移除所有元素的事件處理程序,再綁定新的事件（后面可以改成bind()方法進行綁定）。
這種方法也有個前提，那就是被覆蓋的方法如果是通過live()方法綁定的，會沒有效果。

相信一定有多事的小伙伴要問了，到底什么時候用bind()方法或者live()方法？兩者的區別是什么？
然而我要下班了，這個問題有點復雜，我會留到下一篇文章和大家一起探索。

云服務器 GPU云服務器 jquery預綁定事件 jquery綁定hover事件 jquery綁定事件on jquery的事件處理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85876.html

jQuery源碼解析之你并不真的懂事件委托及target和currenttarget的區別

摘要：源碼源碼行被點擊了點擊了，即委托的事件被點擊了優先添加委托，再添加其他即委托在上的事件數量在下標為的位置插入委托事件解析可以看到，是優先添加委托事件，再添加自身事件，觸發事件的時候也是按這個順序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：請先回顧下我之前寫的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 評論0 收藏0
【JavaScript系列】動態綁定事件方法：(1)jquery的on方法；(2)html元素綁定

摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點擊事件被的事件覆蓋。分析不同的綁定方式執行順序屬性元素事件事件。元素綁定事件刪除按鈕。屬性綁定事件動態綁定事件方法的方法的屬性綁定。一、動態監聽加載對象當使用js或jQuery動態創建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監聽事件...

young.li 2019-08-26 10:20 評論0 收藏0
[譯] addEventListener 與 onclick，孰優孰劣？

摘要：上面的例子應用了匿名函數這個特性，還可以使用構造函數或者閉包來添加事件監聽器另一個重要特性，則是上面這段代碼中最后一行的最后一個參數，用來控制監聽器對于冒泡事件的響應。在這里你不能使用閉包或者匿名函數，并且控制域也是有限的。原文出處：addEventListener vs onclick 之所以會想到這個話題，是因為在回顧自己之前寫的為 button 動態綁定事件的函數時，腦海里忽...

wums 2019-08-19 18:24 評論0 收藏0
JavaScript 瀏覽器事件解析

摘要：原文瀏覽器事件之間的關系程序采用了異步事件驅動編程模型，維基百科對它的解釋是事件驅動程序設計英語是一種電腦程序設計模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、瀏覽器、事件之間的關系 JavaScript 程序采用了異步事件驅動編程（Event-driven program...

spacewander 2019-08-20 11:26 評論0 收藏0