當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【JQuery】on/off 绑定事件和解绑事件

發布時間：2024/9/19 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了【JQuery】on/off 绑定事件和解绑事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

on 綁定事件、off 解綁事件
on 添加事件、off 刪除事件

JQuery on() 方法

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

綁定事件

綁定多個事件

<!DOCTYPE html> <html> <head><title>test</title><meta charset="UTF-8"><script src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script> </head> <body></body> <button id="hello">Hello</button><script type="text/javascript">$("#hello").on("click", function(){alert("hello");});$("#hello").on("click", function(){alert("hello #2");});$("#hello").on("click", function(){alert("hello #3");}); </script></html>

說明：點擊 Hello 按鈕，會一次彈出對話框hello、hello #2、hello #3。

JQuery off() 方法

off() 方法通常用于移除通過 on() 方法添加的事件處理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。

解綁事件

說明：點擊 Hello 按鈕，什么也不會發生。上面的代碼將所有通過on添加的click事件解綁。

解綁一個事件

<!DOCTYPE html> <html> <head><title>test</title><meta charset="UTF-8"><script src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script> </head> <body></body> <button id="hello">Hello</button><script type="text/javascript">function tip(){alert("hello");}function tip2(){alert("hello #2");}function tip3(){alert("hello #3");}$("#hello").on("click", tip);$("#hello").on("click", tip2);$("#hello").on("click", tip3);$("#hello").off("click", tip3); </script></html>

參考

https://www.w3cschool.cn/jquery/event-on.html
https://api.jquery.com/on/
https://www.w3cschool.cn/jquery/event-off.html
https://api.jquery.com/off/

總結

以上是生活随笔為你收集整理的【JQuery】on/off 绑定事件和解绑事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： OPPO Reno11 手机渲染图曝光：
下一篇：极空间 T2 随身数据魔盒开卖：双 M.