JavaScript中的事件模型(详细案例代码)

文章目录

    • 一、事件与事件流
    • 二、事件模型
      • 原始事件模型
        • 特性
      • 标准事件模型
        • 特性
      • IE事件模型

一、事件与事件流

javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等

由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念

事件流都会经历三个阶段:

  • 事件捕获阶段(capture phase)
  • 处于目标阶段(target phase)
  • 事件冒泡阶段(bubbling phase)

事件冒泡是一种从下往上的传播方式,由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点,也就是DOM中最高层的父节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Event Bubbling</title></head><body><button id="clickMe">Click Me</button></body>
</html>

然后,我们给button和它的父元素,加入点击事件

var button = document.getElementById('clickMe');button.onclick = function() {console.log('1.Button');
};
document.body.onclick = function() {console.log('2.body');
};
document.onclick = function() {console.log('3.document');
};
window.onclick = function() {console.log('4.window');
};

点击按钮,输出如下

1.button
2.body
3.document
4.window

点击事件首先在button元素上发生,然后逐级向上传播

事件捕获与事件冒泡相反,事件最开始由不太具体的节点最早接受事件, 而最具体的节点(触发节点)最后接受事件

二、事件模型

事件模型可以分为三种:

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

原始事件模型

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

  • 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即可

标准事件模型

在该事件模型中,一次事件共有三个过程:

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

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

addEventListener(eventType, handler, useCapture)

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

removeEventListener(eventType, handler, useCapture)

参数如下:

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

举个例子:

var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);
特性
  • 可以在一个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!,输出如下

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

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

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

输出如下

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

IE事件模型

IE事件模型共有两个过程:

  • 事件处理阶段:事件到达目标元素, 触发目标元素的监听函数。
  • 事件冒泡阶段:事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行

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

attachEvent(eventType, handler)

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

detachEvent(eventType, handler)

举个例子:

var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

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

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

相关文章

js实现扫描线填色算法使用canvas展示

算法原理 扫描线填色算法的基本思想是&#xff1a;用水平扫描线从上到下扫描由点线段构成的多段构成的多边形。每根扫描线与多边形各边产生一系列交点。将这些交点按照x坐标进行分类&#xff0c;将分类后的交点成对取出&#xff0c;作为两个端点&#xff0c;以所填的色彩画水平…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《适应分布式资源渗透率提高的配电网网元规划方法》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

笔记:《NCT全国青少年编程能力等级测试教程Python语言编程三级》

NCT全国青少年编程能力等级测试教程Python语言编程三级 ISBN:9787302574859 绪论 专题1 序列和元组 考查方向 考点清单 考点1 组合数据类型 序列类型(字符串、列表、元组);集合类型;映射类型。 考点2 元组类型 (一)元组类型…

【QT 5 +Linux下qt软件点击.sh脚本运行+Dconf编辑器+学习他人文章+番外篇:点击脚本运行软件】

【QT 5 Linux下qt软件点击.sh脚本运行Dconf编辑器学习他人文章番外篇&#xff1a;点击脚本运行软件】 1、前言2、实验环境3、自我学习总结-本篇总结1、说明&#xff1a;代替qt的快捷方式2、适用性更广3、了解工具&#xff1a;Dconf编辑器注意事项&#xff1a; 4、参考链接-感谢…

PCM和I2S区别

I2S和PCM接口都是数字音频接口&#xff0c;而所见的蓝牙到cpu以及codec的音频接口都是用PCM接口&#xff0c;是不是两个接口有各自不同的应用呢&#xff1f;先来看下概念。 PCM&#xff08;PCM-clock、PCM-sync、PCM-in、PCM-out&#xff09;脉冲编码调制&#xff0c;模拟语音信…

Python列表详解

文章目录 索引和逆转增删元素和查找元素排序 刷完这60个标准库模块&#xff0c;成为Python骨灰级玩家 索引和逆转 列表几乎是Python中使用频率最高的数据结构了&#xff0c;一般来说&#xff0c;只需用逗号分隔&#xff0c;并用方括号括起来&#xff0c;便是列表。 x [1,2,3…

C++面试100问(八)

C中栈溢出的解决办法有哪些&#xff1f; 1&#xff09;、增加栈内存的数目&#xff1b;如果是不超过栈大小但是分配值小的&#xff0c;就增大分配的大小 2&#xff09;、使用堆内存&#xff1b;具体实现由很多种方法可以直接把数组定义改成指针,然后动态申请内存;也可以把局部变…

C++/CLI使用VS创建 CLR 控制台应用程序

你可以使用“创建新项目”对话框中的“CLR 控制台应用 (.NET Framework)”模板创建已具有基本项目引用和文件的控制台应用项目。 安装 Visual Studio C++ 工作负载时,默认情况下不安装 C++/CLI 支持。 如果没有在“创建新项目”对话框中看到 CLR 项目模板,你可能需要安装 C+…

基础:TCP是什么?

1. TCP 是什么&#xff1f; TCP&#xff08;Transmission Control Protocol 传输控制协议&#xff09; 是一种面向连接的、可靠的、基于字节流的传输层通信协议&#xff0c;由IETF的RFC 793 [1]定义。 TCP旨在适应支持多网络应用的分层协议层次结构。连接到不同但互连的计算机…

集成 Spring Data JPA

文章目录 集成 Spring Data JPA1. 添加依赖2. 配置数据源3. 配置 JPA 属性4. 创建实体类5. 创建仓库接口6. 配置事务管理&#xff08;可选&#xff09;7. 使用仓库8. 处理异常和日志&#xff08;可选&#xff09;9. 自定义仓库方法&#xff08;可选&#xff09;10. 使用 Spring…

如何成为一名优秀的硬件工程师

求知若饥&#xff0c;大智如愚&#xff0c;这是乔布斯说的&#xff0c;很多工程师把这句话作为工程师的最基本的职业素养。 “工程师是科学家&#xff1b;工程师是艺术家&#xff1b;工程师也是思想家。”实际上&#xff0c;工程师是利用自然科学来创造工程的人。工程既是物质…

zabbix配置详解

zabbix-server 主要参数及其作用如下所示&#xff1a; 1、DBHost 数据库主机地址 2、DBName 数据库名称 3、DBUser、DBPassword 数据库用户名和数据库密码 4、DBPort 数据库连接端口 5、AlertScriptPath 告警脚本存放路径 6、CacheSize 缓存大小 7、CacheUpdateFrequency 缓存…

Docker容器化技术(使用Dockerfile制作镜像)

Docker中的镜像分层 Docker 支持通过扩展现有镜像&#xff0c;创建新的镜像。实际上&#xff0c;Docker Hub 中 99% 的镜像都是通过在 base 镜像中安装和配置需要的软件构建出来的。 1、Docker 镜像为什么分层 镜像分层最大的一个好处就是共享资源。 比如说有多个镜像都从相…

智慧城市:提升城市治理能力的关键

目录 一、智慧城市的概念及特点 二、智慧城市在提升城市治理能力中的应用实践 1、智慧交通&#xff1a;提高交通治理效率 2、智慧政务&#xff1a;提升政府服务水平 3、智慧环保&#xff1a;加强环境监测与治理 4、智慧安防&#xff1a;提高城市安全水平 三、智慧城市在…

【PythonCode】力扣Leetcode6~10题Python版

【PythonCode】力扣Leetcode6~10题Python版 前言 力扣Leetcode是一个集学习、刷题、竞赛等功能于一体的编程学习平台&#xff0c;很多计算机相关专业的学生、编程自学者、IT从业者在上面学习和刷题。 在Leetcode上刷题&#xff0c;可以选择各种主流的编程语言&#xff0c;如C、…

【python】【多线程】巧用Python 实现多线程批量将 PDF 文档转换为 Word 格式

2. PDF文件批量转换Word 使用 Python 实现多线程批量将 PDF 文档转换为 Word 格式的示例代码&#xff1a; import os import threading from pdf2docx import Converterclass PdfToWordThread(threading.Thread):def __init__(self, pdf_file, output_dir):threading.Thread._…

我的尝试:Codigger + Vim

若您愿意耐心投入&#xff0c;学习 Vim 的过程其实远比想象中轻松。我对 Vim 产生兴趣&#xff0c;主要是源于它对提升生产力的巨大潜力。我尝试了 Neovim、NvChad 以及 Codigger Vim 插件&#xff0c;如今我的工作效率已远超从前。 那么&#xff0c;Vim 究竟是什么呢&#xff…

【调参】如何为神经网络选择最合适的学习率lr-LRFinder-for-Keras

【调参】如何为神经网络选择最合适的学习率lr-LRFinder-for-Keras_学习率选择-CSDN博客文章浏览阅读9.2k次&#xff0c;点赞6次&#xff0c;收藏55次。keras 版本的LRFinder&#xff0c;借鉴 fast.ai Deep Learning course。前言学习率lr在神经网络中是最难调的全局参数&#x…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Navigator)

路由容器组件&#xff0c;提供路由跳转能力。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 接口 Navigator(value?: {target: string, type?: NavigationType}) …

最新2024年项目基金撰写与技巧及GPT融合应用

随着社会经济发展和科技进步&#xff0c;基金项目对创新性的要求越来越高。申请人需要提出独特且有前瞻性的研究问题&#xff0c;具备突破性的科学思路和方法。因此&#xff0c;基金项目申请往往需要进行跨学科的技术融合。申请人需要与不同领域结合&#xff0c;形成多学科交叉…