脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery监听书记兼

分享jQuery的3种常见事件监听方式

 更新时间：2022年03月20日 11:43:29   作者：Erudite  
这篇文章主要介绍了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）。感兴趣的读者可以查看官方帮助文档。

到此这篇关于分享jQuery3种常见事件的监听方式的文章就介绍到这了,更多相关jQuery监听方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论