jQuery off()
此方法移除一個事件處理函式。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼.off()
引數解析:
如果沒有引數,那麼將移除所有的事件處理函式。
jQuery1.7版本新增。
語法結構二:
[JavaScript] 純文字檢視 複製程式碼.off(events [, selector ] [, handler ])
引數解析:
(1).events:一個或多個空格分隔的事件型別和可選的名稱空間,或僅僅是名稱空間,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
(2).selector:可選,一個選擇器字串,用於篩選將要移除事件處理函式的元素。
(3).handler:可選,要移除的事件處理函式。
jQuery1.7版本新增。
語法結構三:
[JavaScript] 純文字檢視 複製程式碼.off(events [, selector ])
引數解析:
(1).events:一個物件,鍵是由一個或多個由空格分隔的事件型別及可選的名稱空間,值是這些事件型別所對應的事件處理函式。
(2).selector:可選,一個選擇器字串,用於篩選將要移除事件處理函式的元素。
jQuery1.7版本新增。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:150px; background:#ccc; text-align:center; color:red; } #ant,#result{ width:150px; height:100px; background:green; } </style> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#box").on("click", function () { $("#result").text("螞蟻部落"); }) $("#box").on("mouseover", function () { $("#result").css("background-color","red"); }) $("#off").click(function () { $("#box").off(); }) }) </script> </head> <body> <div id="box"> <div id="ant"> <input type="button" value="檢視效果"/> </div> </div> <div id="result"></div> <input type="button" id="off" value="解綁事件處理函式"/> </body> </html>
點選解綁按鈕可以移除在box元素上註冊的所有事件處理函式。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:150px; background:#ccc; text-align:center; color:red; } #ant,#result{ width:150px; height:100px; background:green; } </style> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#box").on("click", function () { $("#result").text("螞蟻部落"); }) $("#box").on("mouseover", function () { $("#result").css("background-color","red"); }) $("#off").click(function () { $("#box").off("mouseover"); }) }) </script> </head> <body> <div id="box"> <div id="ant"> <input type="button" value="檢視效果"/> </div> </div> <div id="result"></div> <input type="button" id="off" value="解綁事件處理函式"/> </body> </html>
點選解綁按鈕,會刪除註冊在box元素上的mouseover事件。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:150px; background:#ccc; text-align:center; color:red; } #ant,#result{ width:150px; height:100px; background:green; } </style> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#box").on("click", function () { $("#result").text("螞蟻部落"); }) $("#box").on("mouseover", function () { $("#result").css("background-color","red"); }) $("#off").click(function () { $("#box").off("click","input"); }) }) </script> </head> <body> <div id="box"> <div id="ant"> <input type="button" value="檢視效果"/> </div> </div> <div id="result"></div> <input type="button" id="off" value="解綁事件處理函式"/> </body> </html>
點選解綁按鈕可以移除input元素上的click事件處理函式。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:150px; background:#ccc; text-align:center; color:red; } #ant,#result{ width:150px; height:100px; background:green; } </style> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function () { function txt() { $("#result").text("螞蟻部落"); } $("#box").on("click", txt) $("#off").click(function () { $("#box").off("click",txt); }) }) </script> </head> <body> <div id="box"> <div id="ant"> <input type="button" value="檢視效果"/> </div> </div> <div id="result"></div> <input type="button" id="off" value="解綁事件處理函式"/> </body> </html>
可以移除指定型別事件具體的事件處理函式。
相關文章
- jQuery.fx.offjQuery
- tip-off
- [DOM Event Learning] Section 3 jQuery事件處理基礎 on(), off()和one()方法使用jQuery事件
- 專案Kick Off的作用
- Vue EventBus事件偵聽($on、$emit、$off、$once)Vue事件MIT
- Linux acpi off學習的必要Linux
- 常回家看看之off_by_one
- nginx -g "daemon off;" 你學廢了嗎?Nginx
- D專案軼事之Kick-off
- How to Turn Archiving ON and OFF in Oracle RDBMS [ID 69739.1]Oracle
- RabbitMQ Exchange & Queue Design Trade-offMQ
- 與 Rust 勾心鬥角 · 解析 OFF 檔案Rust
- 小微型庫(3.繫結on和解綁off)
- 最好用的mac防火牆工具 Hands Off! 4.4.3Mac防火牆
- Vue 中 $on $once $off $emit 詳細分析,以及使用VueMIT
- Linux下的堆off-by-one的利用Linux
- Entity Framework Code-First(18):Turn off DB InitializerFramework
- oracle 表空間關閉自增長 autoextend offOracle
- 什麼是堆外記憶體off-heap記憶體
- 《OFF學-會玩,才會成功》:遊玩有助於工作
- cmd_sqlplus:set head off and set head onSQL
- 2008 3 17:It was a difficult task,but we brought it off.
- MySQL原理 - InnoDB引擎 - 行記錄儲存 - Off-page 列MySql
- CVE-2018-6789 Exim Off-by-one漏洞分析
- Please add or free up more resources then turn off safe mode manually.
- jQuery初探:自制jQueryjQuery
- use database 切換提示You can turn off this feature to get a quicker startupDatabaseUI
- Unlink學習筆記(off-by-one null byte漏洞利用)筆記Null
- TNS-12518: TNS:listener could not hand off client connectionclient
- Square Off智慧國際象棋:隔著地球也能對戰下棋
- TNS-12518 TNS listener could not hand off client connectionclient
- speck Galaxy S5 case universe of potential clients begins to trail offclientAI
- ORA-12518: TNS:listener could not hand off client connectionclient
- EBS R12 - The system has not been taken off maintenance mode completely.AINaN
- CONFIGURE CONTROLFILE AUTOBACKUP OFF下恢復控制檔案
- ORA-12518, TNS:listener could not hand off client connectionclient
- unix/linux環境中Oracle 10G RAC OFF和RAC ONLinuxOracle 10g
- 我的’jQuery’和jQueryjQuery