jQuery常见事件的监听方式

更新日期: 2021-06-03阅读: 2.1k标签: 监听

在 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)。感兴趣的读者可以查看官方帮助文档。

来自:https://www.cnblogs.com/xcbb/archive/2021/06/03/14845256.html


链接: https://www.fly63.com/article/detial/10374

原生js监听浏览器后退按钮的事件方法

js监听浏览器后退按钮的事件首先我们要了解浏览器的history。可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测,那么我们就可以进行监听。

使用 vue 实例更好的监听事件

文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法,单独监听事件。这样代码书写较为简练,容易管理。

js 按键监听事件(keydown event)

监听全局键盘按下事件,例如监听全局回车事件;监听某个组件键盘按下事件,例如监听id为btn的button组件的回车按下事件;如果是要监听组合键,例如监听ctrl+c

Vue2.0解决watch对象属性变化监听不到问题

在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案,在这里把方法记录下来

vue中的watch的用法

在vue中,使用watch来响应数据的变化。下面代码是watch简单的用法:监听值变化;监听处理函数,在所监听的数据后面直接加字符串形式的方法名;监听对象变化

uniapp监听网络状态 - 判断是否有网络

由于新机首次安装app的时候会出现:请求网络权限“是否允许使用数据”,如果用户很长时间没点击允许,就会出现app内接口请求永远返回失败的情况,需要用户清掉APP重新打开才能正常请求使用。

mutationobserver监听dom变化

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。DOM 的变动会触发 Mutation Observer 事件,但与事件不同的是,Mutation Observer 是异步触发

Js如何移除事件监听器

在运行时清理你的代码是构建高效、可预测的应用程序,没有商量余地的部分。在JavaScript中,实现这一目标的方法之一是很好地管理事件监听器,尤其是当不再需要时移除它们。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!