网站实现多语言,网站程序超市,wordpress nova 汉化,免费注册域名网站推荐在前端开发的舞台上#xff0c;用户与页面的互动是一场精彩的表演。而 JQuery#xff0c;作为 JavaScript 的一种封装库#xff0c;为这场表演提供了更为便捷和优雅的事件绑定方式。其中#xff0c;on 和 off 两位主角#xff0c;正是这场奇妙舞曲中的核心演员。在这篇博客…
在前端开发的舞台上用户与页面的互动是一场精彩的表演。而 JQuery作为 JavaScript 的一种封装库为这场表演提供了更为便捷和优雅的事件绑定方式。其中on 和 off 两位主角正是这场奇妙舞曲中的核心演员。在这篇博客中我们将深入探讨这两位演员的特长、用法以及一些鲜为人知的技巧带你踏入 JQuery 事件绑定的精妙世界。
on事件的绑定大师
首先让我们认识一下 on这位事件绑定的大师。on 方法的作用是为被选中的元素绑定一个或多个事件处理函数。这个方法支持多种用法让我们逐一揭开它的神秘面纱。
基础用法
首先让我们来看一个简单的例子。假设有一个按钮我们想要在点击时弹出一个提示框。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 使用 on 方法绑定点击事件$(#myButton).on(click, function() {alert(按钮被点击了);});/script
/body
/html在这个例子中我们使用 on 方法为按钮绑定了一个点击事件。当按钮被点击时回调函数内的代码就会执行弹出一个提示框。
多个事件类型
on 方法不仅支持单个事件类型还可以同时绑定多个事件类型。让我们看一个同时监听鼠标悬停和点击事件的例子。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton悬停或点击我/buttonscript// 同时绑定鼠标悬停和点击事件$(#myButton).on(mouseenter click, function() {alert(鼠标悬停或点击事件发生了);});/script
/body
/html在这个例子中我们使用空格将两个事件类型连接在一起实现了同时监听鼠标悬停和点击事件。当鼠标悬停或按钮被点击时都会触发相应的回调函数。
事件代理
有时候我们需要在动态生成的元素上绑定事件。这时候事件代理就能派上用场了。事件代理通过将事件绑定到父元素上然后利用事件冒泡的原理在父元素上捕获事件并判断具体触发事件的子元素。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodyul idmyListliItem 1/liliItem 2/liliItem 3/li/ulscript// 使用事件代理绑定列表项点击事件$(#myList).on(click, li, function() {alert(列表项被点击了);});// 动态添加一个列表项$(#myList).append(liItem 4/li);/script
/body
/html在这个例子中我们使用了事件代理将点击事件绑定到了 ul 元素上但指定了只有 li 元素被点击时才触发回调函数。这样即使在页面加载完成后动态添加了新的列表项它们仍然会受到事件的监听。
解绑事件
on 方法不仅能绑定事件还能解绑事件以避免不必要的执行。off 方法就是用于解绑事件的工具它可以根据事件类型、选择器、回调函数等信息来进行解绑。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 绑定点击事件function handleClick() {alert(按钮被点击了);}$(#myButton).on(click, handleClick);// 过一段时间后解绑事件setTimeout(function() {$(#myButton).off(click, handleClick);}, 3000);/script
/body
/html在这个例子中我们首先使用 on 方法绑定了一个点击事件。然后通过 setTimeout 函数模拟了一段时间后的解绑过程。在实际项目中你可以根据需要来触发解绑操作例如在特定条件下或者在页面销毁时。
on 方法的进阶用法
命名空间
在复杂的项目中可能存在多个相同类型的事件需要管理这时候就可以使用命名空间namespace来区分它们。命名空间可以是一个字符串用于标识特定的事件集合。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 使用命名空间绑定点击事件$(#myButton).on(click.myNamespace, function() {alert(按钮被点击了);});// 过一段时间后解绑指定命名空间下的点击事件setTimeout(function() {$(#myButton).off(click.myNamespace);}, 3000);/script
/body
/html在这个例子中我们在绑定事件时使用了命名空间 .myNamespace然后在解绑时指定了相同的命名空间。这样只有在特定命名空间下绑定的事件才会被解绑不影响其他事件。
事件数据传递
有时候我们需要在触发事件时传递一些额外的数据。on 方法允许我们通过事件对象的 data 属性来实现这一目的。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 使用事件数据传递绑定点击事件$(#myButton).on(click, { message: Hello, World! }, function(event) {alert(event.data.message);});/script
/body
/html在这个例子中我们在绑定点击事件时通过对象 { message: Hello, World! } 传递了一条消息。在回调函数中我们通过 event.data.message 获取到了这条消息并弹出提示框。
off解绑的魔法师
off 方法是 on 的搭档它用于解绑一个或多个事件处理函数。在上面的例子中我们已经见识过 off 的简单用法下面让我们更深入地了解它的各种姿势。
解绑指定事件类型
off 方法可以根据事件类型来解绑事件。如果你只想解绑某个具体事件类型的回调函数可以这样做
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 绑定点击和悬停事件$(#myButton).on(click, function() {alert(按钮被点击了);}).on(mouseenter, function() {alert(鼠标悬停在按钮上);});// 过一段时间后解绑点击事件setTimeout(function() {$(#myButton).off(click);}, 3000);/script
/body
/html在这个例子中我们首先使用 on 方法绑定了点击和悬停事件。然后通过 off 方法解绑了点击事件。这样鼠标悬停事件仍然会被触发但点击事件不再响应。
解绑所有事件
如果你想彻底解绑所有类型的事件可以调用 off 方法时不传递任何参数。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 绑定点击和悬停事件$(#myButton).on(click, function() {alert(按钮被点击了);}).on(mouseenter, function() {alert(鼠标悬停在按钮上);});// 过一段时间后解绑所有事件setTimeout(function() {$(#myButton).off();}, 3000);/script
/body
/html在这个例子中我们使用 off 方法解绑了所有类型的事件。这样不论是点击还是悬停都不再触发相应的回调函数。
解绑指定事件类型及回调函数
如果你只想解绑某个具体事件类型的指定回调函数可以传递两个参数给 off 方法第一个参数是事件类型第二个参数是要解绑的回调函数。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 绑定点击和悬停事件function clickHandler() {alert(按钮被点击了);}function hoverHandler() {alert(鼠标悬停在按钮上);}$(#myButton).on(click, clickHandler).on(mouseenter, hoverHandler);// 过一段时间后解绑点击事件setTimeout(function() {$(#myButton).off(click, clickHandler);}, 3000);/script
/body
/html在这个例子中我们使用 on 方法绑定了点击和悬停事件的两个回调函数 clickHandler 和 hoverHandler。然后通过 off 方法解绑了点击事件中的 clickHandler。这样只有悬停事件仍然会触发 hoverHandler 回调函数。
解绑指定命名空间下的事件
如果你使用了命名空间来管理事件也可以通过指定命名空间来解绑事件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJQuery 事件绑定/titlescript srchttps://code.jquery.com/jquery-3.6.4.min.js/script
/head
bodybutton idmyButton点击我/buttonscript// 使用命名空间绑定点击事件$(#myButton).on(click.myNamespace, function() {alert(按钮被点击了);});// 过一段时间后解绑指定命名空间下的点击事件setTimeout(function() {$(#myButton).off(click.myNamespace);}, 3000);/script
/body
/html在这个例子中我们在绑定事件时使用了命名空间 .myNamespace然后在解绑时指定了相同的命名空间。这样只有在特定命名空间下绑定的事件才会被解绑不影响其他事件。
小结
通过深入学习 on 和 off 方法我们已经更好地理解了 JQuery 事件绑定的精髓。on 方法不仅能够简单直接地绑定事件还支持多种用法和进阶技巧包括事件代理、命名空间、事件数据传递等。而 off 方法则是 on 的得力助手帮助我们灵活地解绑事件保持代码的整洁和高效。
在前端的世界里事件是页面与用户互动的桥梁了解并熟练使用事件绑定是每位前端开发者的基本功之一。希望这篇博客能够帮助你更好地驾驭 JQuery 中的事件绑定让你的页面互动更加出色
Happy coding 作者信息 作者 繁依Fanyi CSDN https://techfanyi.blog.csdn.net 掘金https://juejin.cn/user/4154386571867191
