分享jQuery的3种常见事件监听方式
作者:Erudite 发布时间:2024-02-23 10:21:35
前言:
在 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/p/14845256.html


猜你喜欢
- 一、用 ftplib 模块连接远程服务器ftplib模块常用方法ftp登陆连接from ftplib import FTP #加
- 存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL语句。存储过程和函数可以避免开发人
- 本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下代码实现wxml文件<!--pages/evalua
- requestRequests 是使用 Apache2 Licensed 许可证的 基于Python开发的HTTP 库,其在Python内置
- 1.安装插件,在非虚拟环境conda install nb_condaconda install ipykernel2、安装ipykerne
- Python中使用threading.Condition交替打印两个字符的程序。这个程序涉及到两个线程的的协调问题,两个线程为了能够相互协调
- 这个技巧将教你如何用css做出漂亮的文本按钮,有活力的按钮将节省你很多制作图片的时间,也能让你一天的工作中成为一个快乐的人,让我们一起看看效
- 实现原理:将用户信息保存在数据库中,若能在数据库中检索到用户输入的姓名和口令,就允许访问该一页面。代码如下:protect.asp<h
- 相信用过Gmail的人都知道Gmail有一个草稿自动保存的功能,每过一段时间,Gmail都会自动保存邮件草稿,这样在一些突 * 况下就能快速地
- onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发.
- 数据库中提取长长的文章,总是有碍网页的排版布局。所以,想固定地提取一部分字符,然后后面有……替代。相关推荐:当标题不能显示完整的时候 1、原
- 在页面中使用window全局变量main.js中定义:window.xxx=[];在data中定义:data() {? ? return {
- 具体代码如下所示:<?php//在子类或类内部用“::”调用本类或父类时,不是静态调用方法,而是范围解析操作符。class Paren
- 1.前期准备用户models.pyclass User(models.Model): username = mod
- 第一种是进行多项式拟合,数学上可以证明,任意函数都可以表示为多项式形式。具体示例如下。###拟合年龄import numpy as npim
- 创建一个示例数据框:import pandas as pddf = pd.DataFrame([['乔峰', '男&
- 官网地址:https://dev.mysql.com/downloads/mysql/我这里是RHEL6.5的系统,因此选择RedHat 6
- 本文为大家分享了windows下pycharm安装、创建文件、配置默认模板的具体步骤,供大家参考,具体内容如下步骤: 下包 —->安装
- 前 言在开发高并发系统时,我们可能会遇到接口访问频次过高,为了保证系统的高可用和稳定性,这时候就需要做流量限制,你可能是用的 Ng
- 记录一下今天被坑了一下午的BUG就从半个月前说起吧当时...........................................