浏览器DOM 事件处理流程

最新推荐文章于 2024-05-03 21:05:41 发布
最新推荐文章于 2024-05-03 21:05:41 发布
阅读量372 收藏
点赞数
文章标签： 前端 事件委托
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013703139/article/details/101023572
版权

DOM事件触发流程 捕获流程 => 冒泡流程

捕获过程

传递...
父节点
子节点

事件先由 事件范围内的 父节点传到最后一个 事件范围内的 子节点,分别触发每个节点的事件,称为事件的 捕获过程

冒泡过程

传递...
子节点
父节点

再由最后一个传递到的节点 向上触发返回父节点 ,称为事件的 冒泡过程

addEventListener(click,dom,capture)
capture 第三个参数代表着在 事件传递的哪个过程中被触发,
true 为 捕获过程 中触发,
false 为 冒泡过程 中触发

浏览器内置的事件都是capture为false,也就是冒泡阶段触发,
所谓的事件冒泡

SS1111134
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM事件探秘篇
01-19
1.事件流 时间流— 描述的是从页面中接受事件的顺序。 （1）事件冒泡流。 事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 （2）事件捕获流。 不太具体的节点应该更早接受到事件，而最具体的节点最后接受到事件。 2.JS事件探索 1.HTML事件处理程序 — 直接写在html标签里面的js触发语句。 2.DOM0级事件处理程序。 把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单，跨浏览器的优势。 3.DOM2级事件处理程序。 （1）用于处理制定和删除事件处理程序的操作。 addEventListener（处理的事件名，事
DOM事件流详解
zxn200125的博客
11-25 527
DOM事件流是怎样的，什么是事件捕获，什么是事件冒泡，什么是事件委托
DOM事件流
zk_html的博客
12-12 171
事件流：简单来说就是事件执行顺序；事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。
4、DoM事件流 事件委托、绑定事件
hzg_hou的博客
05-12 802
DOMLO绑定事件高低版本浏览器之间不存在任何的差异事件冒泡事件捕获处理程序(事件执行的代码)dom0事件及低级浏览器的dom2事件（没有第三个参数）都是只有冒泡，以后我们用的最多的也是冒泡，捕获几乎不用，高级浏览器的dom2事件可以根据第三个参数选择是捕获还是冒泡，一般我们都不写，默认是冒泡低版本浏览器DOML0事件写法中,阻止a标签默认行为通过 return false实现, 不支持preventDefault()
理解DOM事件流的三个阶段
weixin_30555515的博客
04-16 281
流的概念，在现今的JavaScript中随处可见。比如说React中的单向数据流，Node中的流，又或是今天本文所讲的DOM事件流，都是流的一种生动体现。用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据。事件流所描述的就是从页面中接受事件的顺序。事件流也有两种，分别是事件冒泡和事件捕获。 在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型，即事件...
DOM以及DOM事件的处理方式
05-26 838
文章目录01.DOM概述02.DOM事件概述03. 事件属性（类型）04.事件对象05.事件的监听06.事件的捕获和冒泡07.阻止事件冒泡的方式 01.DOM概述 Document Object Model （DOM）文档对象模型：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM，可访问 HTML 文档的所有元素，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DO
Javascript高级程序设计--事件笔记
Dean的博客
08-10 473
事件流描述的是从页面中接收事件的顺序。 IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。1.事件冒泡即事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较不具体的节点(文档),从下面页面为例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
浏览器事件机制
qq_43539854的博客
04-24 2547
浏览器事件机制 什么是事件 事件是用户操作页面时发生的交互动作，比如click/move等，事件除了用户触发的动作外，还可以是文档加载、窗口滚动和大小调整。事件被封装为一个event对象，包含了事件的属性和方法。 事件模型 DOM0级事件模型：可以在网页中直接定义监听函数，也可以通过js来指定监听函数，直接在DOM对象上注册事件。 IE事件模型：该事件模型共有两个过程：事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到documen
css 垂直水平居中
zyh_haha的博客
03-10 217
本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~ ...
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
01-21
将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象，达到跨浏览器的效果。代码如下： var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if ...
dom-event-handler:通用DOM事件处理程序，为类方法实现EventListener接口
04-30
dom事件处理程序 实现类方法的接口的通用DOM事件处理程序。 在浏览器中效果很好。 在Node.js生态系统中效果不佳。 安装 $ npm install dom-event-handler 用法 const DOMEventHandler = require ( "dom-event-...
JS事件流与事件处理程序实例分析
01-19
本文实例讲述了JS事件流与事件处理程序。分享给大家供大家参考，具体如下： 1.事件流：从页面中接收事件的顺序 1.1 IE ：事件冒泡流 1.2 Netscape ：事件捕获 1.3 DOM事件流 ：事件捕获阶段——事件目标阶段——...
jQuery学习4 浏览器的事件模型
10-29
首先要知道DOM的两级模式：DOM0级和DOM2级 在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。
element-ui的bug记录
nick_zhang的博客
04-29 433
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
50个前端实战项目之04：隐藏的搜索小组件
最新发布
前端开发博客
05-03 691
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 285
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 292
createWs("测试数据", (res) => {
uni框架下的前端小知识
weixin_53908842的博客
04-30 279
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
用dom2事件处理代码
05-28
好的，以下是一个使用 DOM Level 2 事件处理的示例代码： ```javascript // 获取按钮元素 var btn = document.getElementById('myButton'); // 添加事件处理程序 if (btn.addEventListener) { // 使用 DOM Level 2 标准的方式添加事件处理程序 btn.addEventListener('click', myEventHandler, false); } else if (btn.attachEvent) { // 使用 IE 特定的方式添加事件处理程序 btn.attachEvent('onclick', myEventHandler); } // 事件处理程序 function myEventHandler(event) { // 处理事件的代码 } ``` 在上面的代码中，我们首先通过 `document.getElementById` 方法获取了一个 ID 为 `myButton` 的按钮元素。然后，我们使用 `addEventListener` 方法给该按钮添加了一个 `click` 事件处理程序 `myEventHandler`。如果该浏览器不支持 DOM Level 2 标准的事件模型，则使用 `attachEvent` 方法添加事件处理程序。 最后，我们定义了一个事件处理程序 `myEventHandler`，用于处理按钮的 `click` 事件。在实际应用中，我们可以根据需要编写自己的事件处理程序来完成具体的业务逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值