【前端学习——js篇】6.事件模型

具体见:https://github.com/febobo/web-interview

6.事件模型

①事件与事件流

事件(Events)

事件是指页面中发生的交互行为,比如用户点击按钮、键盘输入、鼠标移动等。在js中,可以通过事件来触发相应的操作,例如执行函数、改变样式等。常见的事件包括点击事件(click)、键盘事件(keypress、keydown、keyup)、鼠标事件(mouseover、mouseout、mousedown、mouseup)等


事件流(Event FLow)

事件流描述了事件在页面中传播和被处理的顺序。在DOM树中,事件流可以分为冒泡阶段和捕获阶段。

  • 事件捕获阶段(Capturing Phase):事件从最外层的元素开始向最具体的元素传播。即事件从document对象开始,逐级向下传播到目标元素。

  • 目标阶段(Target Phase):事件到达目标元素本身。

  • 事件冒泡阶段(Bubbing Phase):事件从目标元素开始向上传播,逐级向上传播到document对象。

    在这里插入图片描述


<html><body><div id="d1"><button id="btn1">click me</button></div>
</body>
</html>
    //冒泡阶段var button = document.getElementById('btn1')var div = document.querySelector('#d1')div.onclick = function () {console.log('2. this is div');};document.body.onclick = function () {console.log('3.this is body');};document.onclick = function () {console.log('4.this is document');};window.onclick = function () {console.log('5.this is window');};button.onclick = function () {console.log('1.this is button');};

冒泡阶段结果:

1.this is button
2.this is div
3.this is body
4.this is document
5.this is window
//捕获阶段var button = document.getElementById('btn1')var div = document.querySelector('#d1')div.addEventListener('click', function () {console.log('2. this is div');}, true);document.body.addEventListener('click', function () {console.log('3.this is body');}, true);document.addEventListener('click', function () {console.log('4.this is document');}, true);window.addEventListener('click', function () {console.log('5.this is window');}, true);button.addEventListener('click', function () {console.log('1.this is button');}, true);

结果与冒泡相反。

②事件模型

事件模型可以分为三种:

  • 原始事件模型(DOM0级)
  • 标准事件模型(DOM2级)
  • IE事件模型(基本不用)

(1)原始事件模型

事件绑定监听函数比较简单, 有两种方式:

  • HTML代码中直接绑定
<input type="button" onclick="fun()">
  • 通过JS代码绑定
var btn = document.getElementById('.btn');
btn.onclick = fun;

【特性】

  • 绑定速度快

DOM0级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载出来,以至于事件可能无法正常运行

  • 只支持冒泡,不支持捕获
  • 同一个类型的事件只能绑定一次
<input type="button" id="btn" onclick="fun1()">var btn = document.getElementById('.btn');
btn.onclick = fun2;

如上,当希望为同一个元素绑定多个同类型事件的时候(上面的这个btn元素绑定2个点击事件),是不被允许的,后绑定的事件会覆盖之前的事件

删除 DOM0 级事件处理程序只要将对应事件属性置为null即可

btn.onclick = null;
(2)标准事件模型

通过 addEventListener 方法来注册事件处理程序,并通过第三个参数来指定事件处理程序是在捕获阶段执行还是在冒泡阶段执行。当第三个参数为 true 时,事件处理程序在捕获阶段执行;当为 false 或省略时,默认在冒泡阶段执行。


事件绑定监听函数的方式如下:

addEventListener(eventType, handler, useCapture)

事件移除监听函数的方式如下:

removeEventListener(eventType, handler, useCapture)

参数如下:

  • eventType指定事件类型(不要加on)
  • handler是事件处理函数
  • useCapture是一个boolean用于指定是否在捕获阶段进行处理,一般设置为false与IE浏览器保持一致

【特性】

  • 可以在一个DOM元素上绑定多个事件处理器,各自并不会冲突
btn.addEventListener(‘click’, showMessage1, false);
btn.addEventListener(‘click’, showMessage2, false);
btn.addEventListener(‘click’, showMessage3, false);
  • 执行时机

当第三个参数(useCapture)设置为true就在捕获过程中执行,反之在冒泡过程中执行处理函数

下面举个例子:

<div id='div'><p id='p'><span id='span'>Click Me!</span></p >
</div>

设置点击事件

var div = document.getElementById('div');
var p = document.getElementById('p');function onClickFn (event) {var tagName = event.currentTarget.tagName;var phase = event.eventPhase;console.log(tagName, phase);
}div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);

上述使用了eventPhase,返回一个代表当前执行阶段的整数值。1为捕获阶段、2为事件对象触发阶段、3为冒泡阶段

点击Click Me!,输出如下

P 3
DIV 3

可以看到,pdiv都是在冒泡阶段响应了事件,由于冒泡的特性,裹在里层的p率先做出响应

如果把第三个参数都改为true

div.addEventListener('click', onClickFn, true);
p.addEventListener('click', onClickFn, true);

输出如下

DIV 1
P 1

两者都是在捕获阶段响应事件,所以divp标签先做出响应

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

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

相关文章

dump文件分析OOM及线程堆栈

OutOfMemoryError (OOM) 如果项目报错&#xff1a; OutOfMemoryError: Java heap space&#xff0c;说明堆内存空间&#xff08;Heap Space&#xff09;中没有足够的空间来分配对象了。 一旦发生 OOM&#xff0c;系统有可能不可用&#xff0c;或者频繁重启。属于非常严重的问题…

基于springboot实现校园管理系统项目【项目源码+论文说明】

基于springboot实现校园管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;校园管理系统当然也不能排除在外。校园管理系统是以实际运用为开发背景&#xff0c…

数据仓库——大维度问题

大维度 大维度很深&#xff0c;有很多记录。大维度很宽&#xff0c;有很多属性。满足任何一种情况&#xff0c;都可以说这是个大维度。 由于数据量很大&#xff0c;很多包含大维度的数据仓库功能可能会很慢&#xff0c;效率很低&#xff0c;需要设计有效的方法&#xff0c;原则…

【数学】积性函数(以 P2303 为例)

定义&#xff1a; 若函数 f ( x ) f(x) f(x) 满足 ∀ gcd ⁡ ( a , b ) 1 , f ( a b ) f ( a ) f ( b ) \forall \gcd(a,b)1, f(ab)f(a)f(b) ∀gcd(a,b)1,f(ab)f(a)f(b)&#xff0c;则函数 f f f 为积性函数。 函数&#xff1a; 莫比乌斯函数 μ ( x ) \mu(x) μ(x) 为…

修改 RabbitMQ 默认超时时间

MQ客户端正常运行&#xff0c;突然就报连接错误&#xff0c; 错误信息写的很明确&#xff0c;是客户端连接超时。 不过很疑虑&#xff0c;为什么会出现连接超时呢&#xff1f;代码没动过&#xff0c;网络也ok&#xff0c;也设置了心跳和重连机制。 最终在官网中找到了答案&am…

windows-MySQL5.7安装

1.安装包下载 https://downloads.mysql.com/archives/community/&#xff08;社区版下载链接&#xff09; 选择Archives可以下载历史包&#xff0c;此处使用5.7.43 2.解压文件 解压文件到你指定安装的目录&#xff1a;解压完成后在mysql-5.7.43-winx64下新建文件my.ini和d…

企业引入“四力平衡”理念,激励员工工作积极性

—— 如何激励业务人员的工作积极性&#xff1f;【所属行业】生产制造业【问题类型】业务人员绩效考核【客户背景】J公司成立于1985年&#xff0c;目前主要从事机床、工具及相关产品的进出口贸易和国内营销业务&#xff0c;自1990年以来&#xff0c;一直属于全国最大的500家外贸…

如何备考2024年AMC10:吃透2000-2023年1250道真题(限时免费送)

有家长朋友问&#xff0c;有没有适合初中学生参加的奥数类比赛&#xff1f;我推荐AMC10美国数学竞赛&#xff0c;在国内可以方便地参加&#xff0c;而且每年全国各省市参加的初中生越来越多。关于AMC10详细的介绍和常见问题解答&#xff0c;可以联系我获得。 那么如何在AMC10竞…

正大国际:黄金投资稳定与保值的避险之选

黄金作为备受投资者追捧的贵金属&#xff0c;在金融市场中扮演着重要的角色。黄金作为一种避险资产具有稳定性和保值特性&#xff0c;能够在市场动荡时提供投资者的资金保护&#xff0c; 正大召煮4/26/12 xiaoccsw 避险需求:当股票市场、货币市场或其他资产类别表现不佳时&a…

浅谈交直流混合微电网能量管理系统关键技术研究综述

摘要&#xff1a;为了提升交直流混合微电网健康有效发展&#xff0c;提高直流互联微电网中分布式电源的能源使用效率&#xff0c;提升区域微电网稳定发展&#xff0c;对交直流混合微电网能量管理系统关键技术进行分析和研究很有必要。文章主要从交直流混合微电网能量管理系统架…

浅谈数据治理之道 数据分析(三)

1. 写在前面 1.1前言 在数据治理中&#xff0c;只有通过深入的数据分析&#xff0c;才能挖掘数据的真正价值&#xff0c;否则数据就发挥不了其作用。数据分析是数据治理环节之一&#xff0c;意在通过收集、整理、处理和解释数据&#xff0c;以获取有价值的信息和洞察力的过程…

cephadm安装reef版本ceph集群

环境 操作系统 Rocky Linux 9.2 minimal 三个节点节点名称 ipmipub ipclus ipceph1192.168.255.8192.168.120.10ceph2192.168.255.9192.168.120.20ceph3192.168.255.10192.168.120.30 所有节点 yum -y install dmidecode vim wget lvm2 chrony epel-release yum-utils dev…

LEETCODE 44. 反转字符串

class Solution { public:void swap(int l,int r,vector<char>& s){char tmps[l];s[l]s[r];s[r]tmp;}void reverseString(vector<char>& s) {int left0;int rights.size()-1;while(left<right){swap(left,right,s);left1;right-1;}} };

印度尼西亚国家出口发展局局长一行莅临锐捷网络,共话数字经济未来

第四届中国跨境电商交易会举办期间,印度尼西亚国家出口发展局局长迪迪苏梅迪一行莅临锐捷网络参观交流,宣传推介印度尼西亚市场资源,挖掘中印尼双方企业合作机遇。福州市商务局副局长潘文等领导共同参与活动。锐捷网络副总裁、数据中心事业部总经理林东豪接待。 印度尼西亚国家…

cesium加载.tif格式文件

最近项目中有需要直接加载三方给的后缀名tif格式的文件 <script src"https://cdn.jsdelivr.net/npm/geotiff"></script> 或者 yarn add geotiff npm install geotiff 新建tifs.js import GeoTIFF, { fromBlob, fromUrl, fromArrayBuffer } from geotif…

android——【封装】使用建造者方式封装一个类

前言 在Kotlin中&#xff0c;使用建造者模式来封装一个类有以下几个好处&#xff1a; 简化对象的创建过程&#xff1a;使用建造者模式可以将复杂的对象创建过程分解为多个简单的步骤&#xff0c;使得代码更加清晰易读。通过链式调用&#xff0c;可以按需设置对象的属性&#xf…

HBase的Python API(happybase)操作

一、Windows下安装Python库&#xff1a;happybase pip install happybase -i https://pypi.tuna.tsinghua.edu.cn/simple 二、 开启HBase的Thrift服务 想要使用Python API连接HBase&#xff0c;需要开启HBase的Thrift服务。所以&#xff0c;在Linux服务器上&#xff0c;执行如…

香港高才通计划abc类的申请材料各不同,附官方续签攻略!

香港高才通计划abc类的申请材料各不同&#xff0c;附官方续签攻略&#xff01; 作为香港“史上最快获批签证”&#xff0c;高才通计划受到内地精英的热烈欢迎&#xff0c;香港高才通于2022年12月28日开放申请&#xff0c;截至2023年12月31日&#xff0c;香港高才通计划已接获62…

android 11 SystemUI 状态栏打开之后的界面层级关系说明之一

比如WiFi 图标的父layout为&#xff1a; Class Name: ButtonRelativeLayout Class Name: QSTileView Class Name: TilePage Class Name: PagedTileLayout Class Name: QSPanel Class Name: NonInterceptingScrollView Class Name: QSContainerImpl Class Name: FrameLayout Cl…

37.网络游戏逆向分析与漏洞攻防-游戏网络通信数据解析-解码器细化类的实现

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;36.数据解码器的…