这篇文章主要为大家展示了“Jquery3种常见事件监听方式是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery3种常见事件监听方式是什么”这篇文章吧。1.html标签内联事件实例1：
这篇文章主要为大家展示了“Jquery3种常见事件监听方式是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery3种常见事件监听方式是什么”这篇文章吧。
实例1：单击页面 "Hello" 按钮，弹出提示框显示 Hello world！
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><button onclick="alert('Hello world!')">Hello</button></body></html>注：在实例1中，事件的监听代码是放在 HTML 标签中，这种方式看起来比较直观，但是这是一种不大提倡的事件监听方式。首先，将视图代码（HTML）与交互代码（javascript）相结合，意味着每当需要更新功能时，都必须编辑 HTML，这将给代码后期的维护带来很大麻烦。其次，它不具备可扩展性。如果我们要将这个单击功能附加到许多按钮上，那么不仅要用一堆重复的代码来增加页面量，而且还会破坏可维护性。
实例2：单击页面"Hello"按钮，弹出提示框显示Hello world！
<!doctype html><html><head><meta charset-"utf-8"><title>无标题文档</title><script type="text/javascript"> window.onload = function { var helloBtn = document.getElementByld("helloBtn")； helloBtn.onclick = function() { alert("Hello world!")； } }</script></head><body><button id="helloBtn">Hello</button></body></html>使用jQuery监听事件有很多种方法，如实例3所示。
实例3：单击页面 "Hello" 按钮，弹出提示框显示 Hello world！
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="jquery-3.3.1.js"></script><script type="text/javascript"> $(function() {//jQuery第一种监听事件方法 $("#helloBtn").click(function() { alert("Hello world!"); });//jQuery第二种监听事件方法 $("#helloBtn").bind("click"，function() { alert("Hello world!"); });//jQuery第三种监听事件方法 $("#helloBtn").on("click"，function() { alert("Hello world!"); })；//jQuery第四种监听事件方法 $("body").on({ click: function() { alert("Hello world!"); } }, "button");//jQuery第五种监听事件方法 $("pody").on("click", "button", function() { alert("Hello world!"); }); });</script></head><body><button id="helloBtn">Hello</button></body></html>注：下面具体分析实例3中用到的 jQuery 事件监听方法。
（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。
（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。
（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。
（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。感兴趣的读者可以查看官方帮助文档。
以上是“jQuery3种常见事件监听方式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: jQuery3种常见事件监听方式是什么
本文链接: https://lsjlt.com/news/325202.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0