首页 > 编程笔记 > JavaScript笔记 > jQuery事件
jQuery off()方法解除绑定事件
既然存在绑定事件,那肯定也存在对应的解绑事件。绑定事件和解绑事件是相反的操作。在 jQuery 中,我们可以使用 off() 方法来解除元素绑定的事件。jQuery 的 off() 方法,有点类似于 JavaScript 的 removeEventListener() 方法。
语法:
off() 方法不仅可以用来解除使用“基本事件”方式添加的事件,还可以用来解除使用“绑定事件”方式添加的事件。
举例:解除使用“基本事件”方式添加的事件
图 1:解除使用“基本事件”方式添加的事件
当我们点击【解除】按钮后,就会把第一个按钮所绑定的 click 事件解除。
举例:解除使用“绑定事件”方式添加的事件
图 2:解除使用“绑定事件”方式添加的事件
当我们点击【解除】按钮后,就会把第一个按钮所绑定的 click 事件解除。学了那么多,我们自然而然就会问:解绑事件都有什么用呢?一般情况下我们都是添加完事件就行了,没必要去解除事件啊!其实大多数情况确实如此,但是还有不少情况是必须要解除事件的。
实际开发中,如果想要实现拖曳效果,我们在 mouseup 事件中就必须要解除 mousemove 事件,如果没有解除就会有 bug。当然,实现拖曳效果是比较复杂的,这里不详细展开。对于解绑事件,我们学到后面就会更清楚它的作用。
语法:
$().off(type)
type 是可选参数,它是一个字符串,表示事件类型。例如单击事件是 "click",按下事件是 "mousedown",以此类推。如果参数被省略,就表示移除当前元素中的所有事件。off() 方法不仅可以用来解除使用“基本事件”方式添加的事件,还可以用来解除使用“绑定事件”方式添加的事件。
举例:解除使用“基本事件”方式添加的事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { //添加事件 $("#btn").click(function(){ alert("新宝库,给你初恋般的感觉") }) //解绑事件 $("#btn_off").click(function(){ $("#btn").off("click"); }); }) </script> </head> <body> <input id="btn" type="button" value="按钮"><br/> <input id="btn_off" type="button" value="解除"/> </body> </html>预览效果如图 1 所示。
图 1:解除使用“基本事件”方式添加的事件
当我们点击【解除】按钮后,就会把第一个按钮所绑定的 click 事件解除。
举例:解除使用“绑定事件”方式添加的事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> input{margin-bottom: 6px;} </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { //添加事件 $("#btn").on("click", function(){ alert("新宝库,给你初恋般的感觉") }) //解绑事件 $("#btn_off").click(function(){ $("#btn").off("click"); }); }) </script> </head> <body> <input id="btn" type="button" value="按钮"><br/> <input id="btn_off" type="button" value="解除"/> </body> </html>预览效果如图 2 所示。
图 2:解除使用“绑定事件”方式添加的事件
当我们点击【解除】按钮后,就会把第一个按钮所绑定的 click 事件解除。学了那么多,我们自然而然就会问:解绑事件都有什么用呢?一般情况下我们都是添加完事件就行了,没必要去解除事件啊!其实大多数情况确实如此,但是还有不少情况是必须要解除事件的。
实际开发中,如果想要实现拖曳效果,我们在 mouseup 事件中就必须要解除 mousemove 事件,如果没有解除就会有 bug。当然,实现拖曳效果是比较复杂的,这里不详细展开。对于解绑事件,我们学到后面就会更清楚它的作用。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算