【JQuery】on/off 绑定事件和解绑事件
生活随笔
收集整理的這篇文章主要介紹了
【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");}); </script></html>綁定多個事件
<!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() 方法的新的替代品。
解綁事件
<!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").off("click"); </script></html>說明：點擊 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.