JavaScript中的事件模型

JavaScript中的事件模型分为:事件和事件流、原始事件、标准事件和IE事件。

事件与事件流

JavaScript中的事件,可以理解为HTML文档或者浏览器中发生的一种交互操作,让网页有互动的功能。常见的事件就是加载事件、鼠标事件和自定义事件。

因为DOM是一个树结构,如果在子节点上绑定事件,那触发事件的时候,就会发生执行顺序的问题,这就涉及到了事件流的概念:

事件流会经历三个阶段:

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

事件冒泡是一种从下往上的传播方式,由触发点开始,然后向上传播到最不具体的那个节点上,也就是DOM中的最高层父节点上。例如以下代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="clickMe">Click Me</button><script>var btn =  document.getElementById('clickMe')btn.onclick = function(){console.log('1.btn')}document.body.onclick = function(){console.log('2.body')}document.onclick = function(){console.log('3.document')}window.onclick = function(){console.log('4.window')}</script>
</body>
</html>

在这里插入图片描述

点击按钮的时候,事件首先在button触发,然后向上传播。

事件捕获阶段则是从Document上开始的。

事件模型

事件模型可以分为三种:

  1. 原始事件模型【DOM0级】
  2. 标准事件模型【DOM2级】
  3. IE事件模型(基本上不用了)

原始事件模型【DOM0级】

事件绑定比较简单,有两种方式:

1、HTML代码中绑定:

<button onclick='funclick()'></button>

2、通过JS代码绑定:

var btn = document.getELementById('btn');
btn.onclick = function(){}

原始事件模型的特性:

  1. 绑定速度快,原始事件具有很好的跨浏览器优势,会以最快的速度绑定,但是由于绑定速度太快,可能页面还未完全加载出来,以至于事件可能无法正常运行。
  2. 只支持冒泡,不支持捕获
  3. 同一个类型的事件只能绑定一次

标准事件模型【DOM2级】

标准事件模型的一个事件,会有三个过程:

  • 事件捕获阶段:事件从Document上一直向下传播到目标元素,依次检查经过的节点是否绑定事件监听函数,如果有那就执行;
  • 事件处理阶段:事件达到目标元素,触发目标元素的监听函数
  • 事件冒泡阶段:事件从目标元素冒泡到Document上,依次检查经过的节点上是否绑定事件监听函数,如果有那就执行。

事件监听函数:addEventListener(eventType, handler, useCapture)
移除监听函数:removeEventListener(eventType, handler, useCapture)

eventType:指定事件类型
handler:事件处理函数
useCapture:是一个布尔值,表示是否在事件捕获阶段执行,默认值是false,和IE浏览器保持一致。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/7491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Find My资讯|苹果设备在修复期间可以保持启用“Find My“功能

iOS 17.5 中有一项名为"维修状态"的新功能&#xff0c;可让送修的设备保持启用"查找我的"&#xff08;Find My&#xff09;功能。此前&#xff0c;用户在送修设备时必须禁用跟踪设备位置的"查找我的"功能&#xff0c;但iOS 17.5发布后&#xff0…

vscode远程免密ssh原理与实操方法

什么是SSH SSH是一种加密协议&#xff0c;全称为Secure Shell&#xff0c;用于安全地远程登录到服务器或其他远程设备上执行命令或传输文件。它提供了一种安全的加密通信机制&#xff0c;使得远程登录和文件传输等操作不会被恶意攻击者窃取或篡改&#xff0c;确保了数据的保密…

Jackson系统开发方法

1、Jackson分析方法是面向数据流的分析方法。这一方法从目标系统的输入、输出数据结构入手&#xff0c;导出程序框架结构&#xff0c;再补充其它细节&#xff0c;就可得到完整的程序结构图。 2、应用场景&#xff1a;这一方法对输入、输出数据结构明确的中小型系统特别有效&am…

数据库(MySQL)—— 初识和创建用户

数据库&#xff08;MySQL&#xff09;—— 初识 什么是数据库数据库的种类创建用户mysql -h 主机名或IP地址 -u 用户名 -p 登录mysqlSELECT USER(); 查看当前用户切换用户GRANT ALL PRIVILEGES ON 赋予用户权限 REVOKE 撤销权限示例注意事项 MySQL的图形化界面工具查看所有用户…

【oracle数据库安装篇三】Linux6.8单机环境oracle11g容灾ADG搭建

说明 DataGuard 是在主节点与备用节点间通过日志同步来保证数据的同步&#xff0c;可以实现数据库快速切换与灾难性恢复。用户能够在对主数据库影响很小的情况下&#xff0c;实现主备数据库的同步。 关联文章 【oracle数据库安装篇一】Linux5.6基于LVM安装oracle11gR2单机 【…

追踪攻击数据包中的真实IP地址:方法与技巧

在网络安全领域&#xff0c;追踪攻击数据包中的真实IP地址是一项至关重要的任务。通过确定攻击者的真实IP地址&#xff0c;可以有效地识别和阻止网络攻击行为&#xff0c;提高网络安全防御水平。IP数据云IP地址查询将介绍几种常用的方法和技巧&#xff0c;帮助安全人员有效追踪…

嵌入式C语言教程:实现气压监测系统

气压监测在气象学、航空和户外活动装备中非常重要。本教程将介绍如何在STM32微控制器上使用数字气压传感器实现实时气压监测系统。 一、开发环境准备 硬件要求 微控制器&#xff1a;STM32L476RG&#xff0c;具备低功耗特性和足够的处理能力。开发板&#xff1a;STM32L4 Disc…

CAXA 3D实体设计2024:塑造未来的创新引擎

在数字化时代的浪潮中&#xff0c;3D CAD实体建模设计正成为推动工业创新的核心动力。CAXA 3D实体设计2024&#xff0c;以其卓越的性能和丰富的功能&#xff0c;为企业和个人用户带来了前所未有的设计体验。 CAXA 3D实体设计2024不仅拥有直观易用的界面&#xff0c;还配备了强…

【Osek网络管理测试】[TG4_TC5]唤醒条件

&#x1f64b;‍♂️ 【Osek网络管理测试】系列&#x1f481;‍♂️点击跳转 文章目录 1.环境搭建2.测试目的3.测试步骤4.预期结果5.测试结果 1.环境搭建 硬件&#xff1a;VN1630 软件&#xff1a;CANoe 2.测试目的 验证DUT验证DUT睡眠后被唤醒&#xff0c;并再次睡眠能否…

LINQ 提供了两种主要的查询语法:方法语法和查询表达式

LINQ 提供了两种主要的查询语法&#xff1a;方法语法和查询表达式。这两种语法在功能上是等价的&#xff0c;只是语法形式不同&#xff0c;开发人员可以根据个人偏好选择使用哪种。下面分别介绍这两种语法&#xff1a; 1. 方法语法&#xff1a; 方法语法是使用 LINQ 扩展方法来…

第七十三章 Apache (UNIX® Linux macOS) 的替代选项 - 替代选项 2:带有 NSD 的 CGI 模块 (nph-CSPcgi)

文章目录 第七十三章 Apache (UNIX Linux macOS) 的替代选项 - 替代选项 2&#xff1a;带有 NSD 的 CGI 模块 (nph-CSPcgi)替代选项 2&#xff1a;带有 NSD 的 CGI 模块 (nph-CSPcgi)映射其他文件类型使用 CGI 和 NSD 操作和管理 Web 网关 第七十三章 Apache (UNIX Linux macOS…

ZoomIt快捷键

ZoomIt快捷键 ZoomIt是一款非常实用的屏幕放大镜软件&#xff0c;可以帮助用户更好地查看电脑屏幕上的细节。一些主要功能包括: 放大镜功能 - 可以实时放大屏幕的任何部分&#xff0c;并支持多种视图模式如正常、灰度、反色等。取色器 - 可以精确获取屏幕上任何颜色的RGB值。…

关于二手车系统学习--登录模块

1.样式1-17行 <div class"cheader"><div style"width: 80%;margin: 0 auto;line-height: 50px;padding-top: 10px"><el-row><el-col:span"5"style"font-size: 20px;cursor: pointer;color: #00ae66;font-weight: bold…

typescript 不是特别常用,容易忘的知识点

1、花括号对象通过方括号字符串形式取值 let obj { name: asd, age: 21, salary: 400, desc: "asdasd", op: [asd, as, qwe] };for (let i in obj) {console.log(obj[i as keyof typeof obj]); }let key name; console.log(obj[key as name]); console.log(obj[ke…

富格林:正确杜绝欺诈实现出金

富格林悉知&#xff0c;现货黄金一直以来都是投资者们追逐的热门品种之一。其安全性和避险特性吸引着广大投资者。但在现货黄金市场中要想实现出金其实并不简单&#xff0c;是需要我们通过一定的技巧和方法去正确杜绝欺诈套路。下面为了帮助广大投资者正确杜绝欺诈实现出金&…

九、redis过期策略

目录 一、设置redis键的过期时间 1、删除过期时间 2、查看过期时间 二、过期删除策略 1、定时删除&#xff1a; 2、惰性删除&#xff1a; 3、定期删除&#xff1a; 4、惰性删除和定期删除配合使用 三、 1、设置redis最大内存 2、设置内存的淘汰方式 总结&#xff1…

运维自动化之 ansible

目录 一 常见的自动化运维工具 &#xff08;一&#xff09;有哪些常见的 自动化运维工具 &#xff08;二&#xff09;为什么后面都变成用 ansible 二 ansible 基本介绍 1&#xff0c; ansible 是什么 2&#xff0c;ansible能干什么 3&#xff0c;ansible 工作原…

桌面文件删除了怎么恢复?4个靠谱方法分享!

“我平常工作的时候喜欢将文件直接保存在电脑桌面上&#xff0c;但是今天一打开电脑&#xff0c;突然发现我的文件都不见了&#xff0c;有什么恢复桌面文件的简单方法吗&#xff1f;希望大家可以推荐几个。” 很多用户在使用电脑时可能都习惯了把文件直接放在桌面上&#xff0c…

RESTful API 构建 Web 应用程序

RESTful API 是一种设计风格&#xff0c;用于创建和管理 Web 应用程序的 API。REST&#xff08;Representational State Transfer&#xff09;表示一组规范和约定&#xff0c;用于在网络上传输和操作数据。RESTful API 使用 HTTP 方法&#xff08;如 GET、POST、PUT、DELETE&am…

基于.NET WinForms 数据CURD功能的实现

使用开发工具 VS 2022 C#&#xff0c;数据库MS SQL SERVER 2019 &#xff0c;基于NET WinForms&#xff0c;实现数据记录的创建(Create)、更新(Update)、读取(Read)和删除(Delete)等功能。主要控件包括&#xff1a;DataGridView&#xff0c;SqlDataApater &#xff0c; DataTab…