jQuery常见事件的监听方式 jq监听事件和处理事件
qiyuwang 2024-12-20 18:15 12 浏览 0 评论
在 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）。感兴趣的读者可以查看官方帮助文档。
相关推荐
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
-
在2015年12月,我在PayPal商业网站(manager.paypal.com)中发现了一个严重的漏洞,这个漏洞的存在,使得我可以通过不安全的JAVA反序列化对象,在PayPal的网站服务器上远程...
- 提醒:Apache Dubbo存在反序列化漏洞
-
背景：近日监测到ApacheDubbo存在反序列化漏洞（CVE-2019-17564），此漏洞可导致远程代码执行。ApacheDubbo是一款应用广泛的高性能轻量级的JavaRPC分布式服务框架...
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
-
近日，我中心技术支撑单位监测到WebLogicT3存在反序列化0day高危漏洞，攻击者可利用T3协议进行反序列化漏洞实现远程代码执行。...
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
-
在对Apachedubbo的CVE-2023-23638漏洞分析的过程中，通过对师傅们对这个漏洞的学习和整理，再结合了一些新学的技巧运用，从而把这个漏洞的利用向前推了一步。整个过程中的研究思路以及...
- 案例|WebLogic反序列化漏洞攻击分析
-
目前网络攻击种类越来越多，黑客的攻击手段也变得层出不穷，常规的防护手段通常是对特征进行识别，一旦黑客进行绕过等操作，安全设备很难发现及防御。通过科来网络回溯分析系统可以全景还原各类异常网络行为，记录所...
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
-
近日，我中心技术支撑单位监测发现ApacheOFBiz官方发布安全更新，修复了一处远程代码执行漏洞。成功利用该漏洞的攻击者可造成任意代码执行，控制服务器。该漏洞编号：CVE-2021-26295，安...
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
-
近日，国家信息安全漏洞共享平台（CNVD）公布了OracleWebLogicwls9-async反序列化远程命令执行漏洞。攻击者利用该漏洞，可在未授权的情况下远程执行命令。该漏洞安全级别为“高危”。现...
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
-
Serde是一个用于序列化和反序列化Rust数据结构的库。它支持JSON、BSON、YAML等多种格式，并且可以自定义序列化和反序列化方式。Serde的特点是代码简洁、易于使用、性能高效。...
- Java反序列化漏洞详解（java反序列化漏洞利用）
-
Java反序列化漏洞从爆出到现在快2个月了，已有白帽子实现了jenkins，weblogic，jboss等的代码执行利用工具。本文对于Java反序列化的漏洞简述后，并对于Java反序列化的Poc进行详...
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
-
安全公告编号:CNTA-2018-00222018年7月18日，国家信息安全漏洞共享平台（CNVD）收录了OracleWebLogicServer反序列化远程代码执行漏洞（CNVD-2018-13...
- CVE-2020-9484 Apache Tomcat反序列化漏洞浅析
-
本文是i春秋论坛作家「Ybwh」表哥原创的一篇技术文章，浅析CVE-2020-9484ApacheTomcat反序列化漏洞。01漏洞概述这次是因为错误配置和org.apache.catalina....
- 告别脚本小子系列丨JAVA安全(8)——反序列化利用链(下)
-
0x01前言...
- 关于WebLogic反序列化高危漏洞的紧急预警通报
-
近日，WebLogic官方发布WebLogic反序列化漏洞的紧急预警通告，利用该漏洞可造成远程代码执行并直接控制Weblogic服务器，危害极大。该漏洞编号为：CVE-2019-2890，安全级别为“...
- 高危!Fastjson反序列化漏洞风险通告
-
漏洞描述...
- 学习Vulhub的Java RMI Registry 反序列化漏洞
-
这个实验，我们先通过dnslog演示命令执行，然后通过反弹shell获得root权限。JavaRemoteMethodInvocation用于在Java中进行远程调用。RMI存在远程bind的...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
- 提醒:Apache Dubbo存在反序列化漏洞
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
- 案例|WebLogic反序列化漏洞攻击分析
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
- Java反序列化漏洞详解（java反序列化漏洞利用）
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)