分享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
猜你喜欢
- 本文实例讲述了sql server实现分页的方法。分享给大家供大家参考,具体如下:declare @index int,@num intse
- 本文实例讲述了Python3.6基于正则实现的计算器。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-#!pyt
- http://pyhdfs.readthedocs.io/en/latest/1:安装由于是windows环境(linux其实也一样),只要
- 一、configparser模块是什么可以用来操作后缀为 .ini 的配置文件;python标准库(就是python自带的意思,无需安装)二
- 本文实例讲述了php 多个变量指向同一个引用($b = &$a)用法。分享给大家供大家参考,具体如下:引用是什么? 引用就是多个变量
- 本文实例为大家分享了python统计序列中元素的具体代码,供大家参考,具体内容如下问题1: &
- python去重及数据合并drop_dupicates参数含义:subset:即表示要去重指定参考的列keep : {‘
- 1. 鼠标的哪个按键被点击?<html><head><script type="text/javas
- 1、表的主键、外键必须有索引;2、数据量超过300的表应该有索引;3、经常与其他表进行连接的表,在连接字段上应该建立索引;4、经常出现在Wh
- 背景 还是学院和专业的关系,我需要保持点击提交按钮后,页面select中继续维持提交前的值 网上有几种办法,要么通过url跳转时候附带参数形
- 本篇文章将介绍3种常见的数据结构和同数据有关的算法。此外,在collections模块中也包含了针对各种数据结构的解决方案。Python内置
- 前言原文:A gentle introduction to generics in Go byDominik Braun万俊峰Kevin:我
- 前言:python提供了诸多的魔法方法,其中__setattr__()方法主要用于类实例进行属性赋值,其定义在Object类官方提供的说明如
- 用户体验已经是一个老生常谈的话题了。我非常赞同某位达人所说的,用户体验设计应该贯穿于产品从萌芽到出生的整个过程,产品原型、视觉设计、前端开发
- MSXML是微软非托管代码栈中最为核心的XML服务集合,不但适合基于COM的开发应用,更是微软AJAX解决方案和客户端XSLT解决方案的核心
- 我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用I
- 1.删除所有的目录,只保留datasharebin2.删除BIN下面除以下三个文件之外的所有文件:libmysql.dll(MYSQL5中的
- 打包依赖文件至目标程序目录问题我使用 PySide2 开发了一个应用程序,为了方便其他人使用,我便使用 PyInstaller 打包成 *.
- 加密算法分类 对称加密算法:对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥发送方和接收方需要持有同一把密钥,发送消息
- 这篇文章主要介绍了Python OrderedDict的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值