百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

jQuery常见事件的监听方式

ztj100 2024-12-09 19:16 22 浏览 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）。感兴趣的读者可以查看官方帮助文档。

相关推荐

离谱!写了5年Vue，还不会自动化测试?

前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。Playwright是一个功能强大的端到...

package.json 与 package-lock.json 的关系

模块化开发在前端越来越流行，使用node和npm可以很方便的下载管理项目所需的依赖模块。package.json用来描述项目及项目所依赖的模块信息。那package-lock.json和...

Github 标星35k 的 SpringBoot整合acvtiviti开源分享，看完献上膝盖

前言activiti是目前比较流行的工作流框架，但是activiti学起来还是费劲，还是有点难度的，如何整合在线编辑器，如何和业务表单绑定，如何和系统权限绑定，这些问题都是要考虑到的，不是说纯粹的把a...

Vue3 + TypeScript 前端研发模板仓库

我们把这个Vue3+TypeScript前端研发模板仓库的初始化脚本一次性补全到可直接运行的状态，包括：完整的目录结构所有配置文件研发规范文档示例功能模块（ExampleFeature）...

Vue 2迁移Vue 3:从响应式到性能优化

小伙伴们注意啦！Vue2已经在2023年底正式停止维护，再不升级就要面临安全漏洞没人管的风险啦！而且Vue3带来的性能提升可不是一点点——渲染速度快40%，内存占用少一半，更新速度直接翻倍！还在...

VUE学习笔记:声明式渲染详解，对比WEB与VUE

声明式渲染是指使用简洁的模板语法，声明式的方式将数据渲染进DOM系统。声明式是相对于编程式而言，声明式是面向对象的，告诉框架做什么，具体操作由框架完成。编程式是面向过程思想，需要手动编写代码完成具...

苏州web前端培训班， 苏州哪里有web前端工程师培训

前端+HTML5德学习内容：第一阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；第二阶段：高级程序设计：原生交互功能开发、面向对象开发与ES5/ES6、工具库...

跟我一起开发微信小程序——扩展组件的代码提示补全

用户自定义代码块步骤：1.HBuilderX中工具栏：工具-代码块设置-vue代码块2.通过“1”步骤打开设置文件...

JimuReport 积木报表 v1.9.3发布，免费可视化报表

项目介绍积木报表JimuReport，是一款免费的数据可视化报表，含报表、大屏和仪表盘，像搭建积木一样完全在线设计！功能涵盖：数据报表、打印设计、图表报表、门户设计、大屏设计等！...

软开企服开源的无忧企业文档(V2.1.3)产品说明书

目录1....

一款面向 AI 的下一代富文本编辑器，已开源

简介AiEditor是一个面向AI的下一代富文本编辑器。开箱即用、支持所有前端框架、支持Markdown书写模式什么是AiEditor？AiEditor是一个面向AI的下一代富文本编辑...

玩转Markdown(2)——抽象语法树的提取与操纵

上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布，转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候，心血来潮，把玩转Markdown(2)给补上了。...

DeepseekR1+ollama+dify1.0.0搭建企业/个人知识库(入门避坑版)

找了网上的视频和相关文档看了之后，可能由于版本不对或文档格式不对，很容易走弯路，看完这一章，可以让你少踩三天的坑。步骤和注意事项我一一列出来：1，前提条件是在你的电脑上已配置好ollama，dify1...

升级JDK17的理由，核心是降低GC时间

升级前后对比升级方法...

一个vsCode格式化插件_vscode格式化插件缩进量

ESlint...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2023011147号-29