jQuery綁定事件監聽bind和移除事件監聽unbind用法實例詳解_jquery
本文實例講述了jQuery綁定事件監聽bind和移除事件監聽unbind用法。分享給大家參考，具體如下：
這裡分別採用後bind(eventType,[data],Listener)//data為可選參數,one()此方法綁定的事件觸發一次後自動刪除，unbind(eventType,Listener),
實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
border:1px solid #000000;
}
input{
border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
var fnMyFunc1; //函数变量
$("img")
.bind("click",fnMyFunc1 = function(){ //赋给函数变量
$("#show").append("<div>点击事件1</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件2</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件3</div>");
});
$("input[type=button]").click(function(){
$("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
});
});
</script>
</head>
<body>
<img src="11.jpg"> <input type="button" value="移除事件1">
<div id="show"></div>
</body>
</html>
再來看這段測試程式碼：
<body> <input type="button" name="aaa" value="点击我"> <input type="checkbox" name="checkbox1"> </body>
JQuery程式碼：
$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}
alert("aaaa")會執行三次，在事件嵌套事件中，不希望看到這樣的情況，需要把上層事件禁用，此時可引入bind和unbind函數解決。
引入函數:
for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}
alert("aaa");只執行一次。
bind() 方法為被選元素新增一個或多個事件處理程序，並規定事件發生時運行的函數
unbind() 方法移除被選元素的事件處理程序。能夠移除所有的或被選取的事件處理程序，或當事件發生時終止指定函數的執行。
event 是事件類型，類型包括：blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouselectleave、change、se 、submit、keydown、keypress、keyup和error等，當然也可以是自訂名稱。
data 為選用參數，作文event.data屬性值傳遞給事件物件的額外資料物件。
function 是用來綁定的處理函數。
文法：
$(selector).bind(event,data,function)
event 和 function 必須指出下面些段程式碼做說明：
例1：刪除p的所有事件
例2：刪除p的click事件
例2：刪除p元素click事件後出發的test函數 和 新增p元素click事件後觸發的test函數
$("p").unbind("click",test);
$("p").bind("click",test);
注意：要定義 .bind() 必須指明什麼事件和函數
現在來看個簡單的demo ，整個div有一個點擊收起展開的事件，如果想要點擊連結但是不觸發div的點擊事件，需要在觸發連結的時候把div的點擊事件禁用，這裡我用到連結mouseenter事件是unbind刪除div的事件。這裡還不算完，這時候只要滑鼠進入連結區域，div的點擊事件就刪除了，我們還需要加入滑鼠移出連結區域的時候恢復div點擊事件。程式碼如下：
$(function(){ var Func = function(){
$(".com2").toggle(200); }
$(".test").click(Func)
$(".test a").mouseenter(function(){
$(".test").unbind(); //删除.test的所有事件
});
$(".test a").mouseleave(function(){
$(".test").bind("click",Func); //添加click事件
});
});
event 是事件類型
…
function 是用來綁定的處理函數。
更多關於jQuery事件相關內容有興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結》
希望本文所述對大家jQuery程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
小紅書如何移除粉絲追蹤 移除粉絲但不封鎖的方法
Mar 12, 2024 pm 04:40 PM
小紅書這一APP上大家所能獲得資訊超多，這裡的功能服務多多，全都是能夠由用戶們自由的選擇進行操作的，完全根據自己的需求，選擇這裡的一些對應的功能操作，解決大家的一些問題，特別的方便，真的每一天都能夠為你們推薦出大量的這一些筆記，內容豐富，所涵蓋的範圍超廣泛，自由的選擇，無論想看這裡的哪一些內容的版塊，都是可以在這裡滿足大家，解決大家的一些問題，大家沒事的時候，都能夠自己嘗試著發佈各種的一些筆記，說不定大家都是有機會獲得大量的一些粉絲哦，那麼你們不想讓一些粉絲們進行關注的話，都能夠選擇移除這一
BTCC教學：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸錢包）是一款免費的、廣受好評的加密錢包軟體。目前，BTCC已支援綁定MetaMask錢包，綁定後可使用MetaMask錢包進行快速登錄，儲值、買幣等，且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中，我們將詳細介紹如何註冊和使用MetaMask，以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼？ MetaMask小狐狸錢包擁有超過3,000萬用戶，是當今最受歡迎的加密貨幣錢包之一。它可免費使用，可作為擴充功能安裝在網絡
小紅書怎麼綁定子帳號？它怎麼檢測帳號是否正常？
Mar 21, 2024 pm 10:11 PM
在現今這個資訊爆炸的時代，個人品牌和企業形象的建立變得越來越重要。小紅書作為國內領先的時尚生活分享平台，吸引了大量用戶關注和參與。對於那些希望擴大影響力、提高內容傳播效率的使用者來說，綁定子帳號成為了一種有效的手段。那麼，小紅書怎麼綁定子帳號呢？又如何檢測帳號是否正常呢？本文將為您詳細解答這些問題。一、小紅書怎麼綁定子帳號？ 1.登入主帳號：首先，您需要登入您的小紅書主帳號。 2.開啟設定選單：點選右上角的“我”，然後選擇“設定”。 3.進入帳號管理：在設定選單中，找到「帳號管理」或「帳號助理」選項，點
今日頭條綁定抖音的步驟方法
Mar 22, 2024 pm 05:56 PM
1、打開今日頭條。 2、點選右下角我的。 3.點選【系統設定】。 4.點選【帳號和隱私設定】。 5.點選【抖音】右邊的按鈕即可綁定抖音。
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
菜鳥app怎麼綁定拼多多 菜鳥裹裹怎麼添加拼多多平台
Mar 19, 2024 pm 02:30 PM
菜鳥app就是能夠提供你們各種物流資訊狀況的平台，這裡的功能非常的強大好用，大家有任何與物流相關的問題，都能在這得到解決的，反正都能為你們帶來一站式的服務，全都能及時解決的，查快遞，取快遞，寄快遞等，都是毫無任何問題，與各個的平台都進行了合作，全部的信息，都能查詢得到的，但是有些時候會出現拼多多當中購買的商品，都是無法呈現出物流的信息，其實是需要大家進行手動綁定拼多多，才能實現的，具體的方法已經整理出來了在下方，大家都能來看看的。菜鳥綁定拼多多帳戶的方法： 1、打開菜鳥APP，在主頁面
菜鳥APP怎麼綁定拼多多 菜鳥APP綁定拼多多方法
Mar 19, 2024 pm 05:16 PM
你們知道在使用菜鳥裹裹的時候是怎麼來綁定拼多多的嗎?菜鳥裹裹App官方正版在這款平台上面對於一些拼多多的物流信息是沒有自動同步上去的，我們需要做的就只能複製單號過來或是查詢你們的手機看看有無快遞的資訊。當然這些都是需要手動完成的，如果你們也想了解更多的話，就和小編一起來看看吧。 菜鳥APP怎麼綁定拼多多 1、打開菜鳥APP，在主頁點選左上角的「導包裹」。 2、在介面中，有許多購物網站，帳號都可以綁定。 3、點選導入其他電商平台。 4、使用者授權：點選拼多多到介面
小米汽車app怎麼綁定充電樁設備
Apr 01, 2024 pm 06:52 PM
最新小米最新推出的小米su7型號汽車霸佔了各種熱搜榜，許多正好有購車需求的用戶們都紛紛選擇了小米su7型號的汽車進行購買，那麼在提車以後如何利用自己的小米汽車app綁定家用充電樁充電呢，那麼這篇教學攻略就會為大家帶來詳細的內容介紹，希望能幫助大家。首先我們先打開小米手機app，點擊右下角我的按鈕然後在我的介面，可以看到家充樁的選項進入到綁定充電樁的頁面以後，點擊下方的去掃碼按鈕，掃描充電樁上的二維碼即可完成充電樁與app的綁定
