jQuery常见事件的监听方式
在 web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句。这就需要对事件进行监听,监听事件的常见方式有以下三种,本人将通过实例来具体介绍。
1.html标签内联事件
实例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.用javascript实现事件监听
实例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>
3.用jquery实现事件监听
使用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)。感兴趣的读者可以查看官方帮助文档。