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

目录
  • 1.HTML标签内联事件
  • 2.用JavaScript实现事件监听
  • 3.用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监听方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • jquery 禁止鼠标右键并监听右键事件

    禁止鼠标右键: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 监听右键事件: $(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) }) 如 $('#dow

  • js监听键盘事件的方法_原生和jquery的区别详解

    经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对.去以下介绍两种不同的方式 原生键盘监听事件:按下一次按键,分为三个过程,按下-按住-松开 onkeydown:某个键被按下 onkeypress:某个键盘的键被按下或按住 onkeyup:某个键盘的键被松开 使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上 以下是原生的

  • 基于 jQuery 实现键盘事件监听控件

    最近项目里要做一个画板,需要对键盘事件进行监听,来进行诸如撤回.重做.移动.缩放等操作,因此顺手实现了一个键盘事件监听控件,期间略有收获,整理出来,希望对大家有所帮助,更希望能获得高手的指点. 1. 自动获取焦点 似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听,而通常需要监听事件的 <DIV>.<CANVAS> 元素都不能获得焦点,因此需要修改目标元素的某些属性使其可以获得焦点,另外一种可行的方法是将事件委托给诸如 <INPUT> 标签.这里采用的是第一类方法

  • jQuery事件的绑定、触发、及监听方法简单说明

    如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等.但在实际中,有一些方法和属性是有兼容性问题的,所以我们会使用 jQuery 来消除兼容性问题. 下面简单的来说一下 jQuery 中事件的基础操作. 绑定事件和事件代理 在 jQuery 中,提供了诸如 click() 这样的语法糖来绑定对应事件,但是这里推荐统一使用 on() 来绑定事件.语法: .on( events [, selector ] [, data ], handler ) event

  • jQuery-mobile事件监听与用法详解

    本文实例讲述了jQuery-mobile事件监听与用法.分享给大家供大家参考,具体如下: 触摸事件 - 当用户触摸屏幕时触发(敲击和滑动) 滚动事件 - 当上下滚动时触发 方向事件 - 当设备垂直或水平旋转时触发 页面事件 - 当页面被显示.隐藏.创建.加载以及/或卸载时触发 一.初始化事件 1. ready 事件 页面加载完成 $(document).ready(function(){ //your code here... }); 2. 页面加载完成事件二 pageinit $(docume

  • jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

    本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法.分享给大家供大家参考,具体如下: 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), 实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

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

    目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听 前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件 实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>

  • 分享jQuery3种常见事件监听方式

    目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听 前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件 实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>

  • Spring Boot应用事件监听示例详解

    前言 本文主要给大家介绍了关于Spring Boot应用事件监听的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 1. Spring Boot特有的应用事件 除了Spring框架的事件,Spring Boot的SpringApplication也发送了一些自己的事件: ApplicationStartingEvent:在任何处理(除了注册listener和initializer)开始之前发送. ApplicationEnvironmentPreparedEvent: 在

  • 浅谈Spring-boot事件监听

    浅谈Spring-boot事件监听

    springboot的事件监听:为bean之间的消息通信提供支持.当一个bean做完一件事以后,通知另一个bean知晓并做出相应处理.这时,我们需要另一个bean,监听当前bean所发生的事件. 实现步骤:四个步骤,四种方式 第一种方式 1.自定义事件,一般是继承ApplicationEvent抽象类 2.定义事件监听器,一般是实现ApplicationListener接口 3.1)把监听器加入到SpringApplication中:ApplicationListener.addListener

  • 深入浅析JavaScript中对事件的三种监听方式

    事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果: <table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>

  • Java添加事件监听的四种方法代码实例

    Java添加事件的几种方式(转载了codebrother的文章,做了稍微的改动): /** * Java事件监听处理--自身类实现ActionListener接口,作为事件监听器 * * @author codebrother */ class EventListener1 extends JFrame implements ActionListener { private JButton btBlue, btDialog; public EventListener1() { setTitle(

  • .NET事件监听机制的局限与扩展分析

    本文实例分析了.NET事件监听机制的局限与扩展.分享给大家供大家参考.具体分析如下: .NET中把"事件"看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. 复制代码 代码如下: // C# someButton.Click += OnSomeButtonClick; 复制代码 代码如下: // Java someButton.addActionListener(     new ActionListener(){    

随机推荐