事件流模型

最新推荐文章于 2024-09-19 10:48:58 发布
最新推荐文章于 2024-09-19 10:48:58 发布
阅读量342 收藏
点赞数
原文链接：http://www.cnblogs.com/love-yangerlei/p/8309592.html
版权

事件流模型 ： 1 冒泡型事件流模型  2 捕获型事件流模型 

在冒泡型事件流中click事件传播顺序为<div>—》<body>—》<html>—》document

在捕获型事件流中click事件传播顺序为document—》<html>—》<body>—》<div>

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

  • 事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。上图中为1~3.
  • 处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
  • 冒泡阶段：事件又传播回文档。

 

转载于:https://www.cnblogs.com/love-yangerlei/p/8309592.html

weixin_30458043
关注
深入理解JS的事件绑定、事件流模型
10-18
JavaScript中的事件绑定和事件流模型是前端开发中的重要概念，它们是实现用户交互和页面动态性的基础。在本文中，我们将深入探讨这两个主题。 一、JS事件 1. **事件分类**： - 鼠标事件：如`click`, `dbclick`, `...
JavaScript 中的事件模型有哪些
qq_36081714的博客
02-08 217
JavaScript 中的事件模型有哪些
JS - 事件模型 - 事件流
DaXiong1024的博客
08-04 439
一、事件模型 JavaScript 中事件模型有两种：DOM0级，DOM2级 DOM0级事件模型 DOM0级事件模型是早期的事件模型，所有浏览器都支持。 注册事件：在事件类型前面加on，如：onclick、onmouseover … 解除事件：dom.onclick = null; 每个DOM对象只能注册一个相同类型的事件，注册多个则会发生覆盖，只执行最后一个事件函数。 DOM2级事件模型 DOM2级事件模型是较新的事件模型，IE8及以下是不支持的。 addEventListener(type,fn,us
聊聊事件模型
最新发布
2401_86113453的博客
09-19 782
如上，当希望为同一个元素绑定多个同类型事件的时候(上面的这个 btn 元素绑定2个点击事件)，是不被允许的，后绑定的事件会覆盖之前的事件。事件冒泡是一种从下往上的传播方式，由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点，也就是 DOM 中最高层的父节点。元素上发生，然后逐级向上传播事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接受事件,而最具体的节点(触发节点)最后接受事件。，返回一个代表当前执行阶段的整数值。都是在冒泡阶段响应了事件，由于冒泡的特性，裹在里层的p 率先做出响应。
JS事件模型
weixin_34283445的博客
09-18 234
JS事件模型 观察者模式 观察者模式又叫做发布订阅者模式(Publish/Subscribe)，它可以让多个观察者对象同时监听某一个主题对象，这个主题对象的状态变化时会通知所有的订阅者，使得它们能够做出反应。JS的事件模型就是一种观察者模式的体现，当对应的事件被触发时，监听该事件的所有监听函数都会被调用。 下面是用JS实现的一个观察者模式...
两种事件流模型
weixin_30568715的博客
07-19 166
事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。 冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 事件捕获的思想就是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。 转载于:https://www...
【基础知识】事件模型
lanwuying的专栏
07-08 1500
DOM树【Document Object Model】 介绍事件模型之前，先简单看下DOM树的结构： DOM树就像是一颗倒长着的大树，这样的对象模型决定了节点之间都有一定的关联。它们关系可能有父子、有兄弟，我们可以顺着这颗树做出许多操作)。 每个HTML页面都是一颗DOM树，浏览器在解析HTML代码时，会按照代码结构将代码解析成一颗树状结构，每个HTML标签对应DOM树上相应的结点。 下面是...
javascript事件模型
06-13
主要有两种事件流模型：冒泡型和捕获型。冒泡型事件从最具体的节点（例如，文档中的一个元素）开始，然后逐级向上层节点传播，直到到达文档的根节点。例如，在IE5.5和IE6中，事件会从div元素冒泡到body、html再到...
javascript事件模型代码
10-30
- **DOM2级事件流**：默认采用冒泡流，但可以通过`addEventListener`的第三个参数设置为`true`来启用捕获流。 5. 事件处理程序的两种类型 - **内联事件处理程序**：在HTML标签中直接设置，如`()">Click me...
DOM 事件流详解
09-03
在深入了解DOM（文档对象模型）事件流之前，我们需要先明确事件流的概念。事件流是指当在DOM中发生一个事件时，浏览器是如何处理这个事件的。在处理过程中，事件会从一个元素流向另一个元素，直到整个页面的所有元素...
Javascript事件流事件模型事件委托
Venciki的博客
10-22 308
事件事件流 事件是与浏览器交互的瞬间，如点击按钮，填写表格等，它是js与html之间交互的桥梁。 事件流有两种： 事件冒泡：是一种从下网上的传播方式。事件最开始由具体的元素，然后逐渐向上传播到最不具体的那个节点，也就是DOM种最高层的父节点。 事件捕获：与事件冒泡相反。事件最开始由不太具体的节点最早接受事件，而最具体的节点最后接受事件。 事件模型 JavaScript中的事件模型主要分为3种：原市事件模型、DOM2事件模型、IE事件模型 DOM0级模型 这是一种被所有浏览器都支持的事件模型，有两种方
如何用java语言编写小游戏？（三）
weixin_51148381的博客
02-06 440
事件模型 实现窗体，还有各种控件之后，如果想要发生些交互行为，事件控制是必不可少的。 一个事件源产生一个事件并把它（事件对象）送到一个或多个监听器，监听器只是简单地等待，直到它收到一事件。事件一旦被监听器接受，监听器将处理这些事件。 一个事件源必须注册监听器，以便监听器可以接收一个特定事件的通知。 事件控制的过程可以分为以下四步： 监听器对象属于一个类的实例，这个类实现了一个特殊的接口，名为“监听者接口”(Listener interface) 事件源是一个对象，它可以注册到一个或多个监听器对象中，以便向
事件模型
weixin_42617917的博客
05-03 688
一、事件模型是什么 浏览器的事件模型，就是通过监听事件执行对应的监听函数。 JS绑定事件监听有三种方法： html的on属性 【on+事件名】的方法绑定 <script> el.setAttribute('onclick','doSomething()'); //等同于<Element onclick = "doSomething()"> </s...
数据分析模型之二：事件模型
AndersonHuang的博客
10-31 1053
在日常工作中，不同岗位、不同角色所关注的事件各不相同，比如，市场人员可能关注点击进入落地页的人数以及进入落地页后用户是否点击核心按钮，比如“立即注册/立即购买”等？运营人员可能更关注某次邀请好友活动中老用户是否点击该活动页面，是否将邀请海报分享到朋友圈？PM可能更关心新功能上线后用户是否点击打开？在洞察诸如此类的指标过程中，事件模型就起到了至关重要的作用。那么，什么叫做“事件”呢？简单讲，就是用户在产品上的行为。
常用事件模型总结
huzilinitachi的专栏
04-02 993
事件模型一般有select、poll、 eventport 、dev/poll、epoll、kqueue这几种。以下对这几种事件模型逐个作原理讲解。 1.select模型  select通过select系统调用监视多个文件描述符集合，select调用返回后，集合中的文件描述符会被内核进行标志位的修改，进程可以获得这些文件描述符从而进行后续的读写操作。select几乎在所有的操作系统平台上都支持...
事件模型的解释
Zhang_h_的博客
11-19 1745
原始事件模型在原始事件模型中（也有说DOM0级），事件发生后没有传播的概念，没有事件流。事件发生，马上处理，完事，就这么简单。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。书写方式有两种： HTML代码中指定属性值： <input type=”button” onclick=”func1()” /> 在js代码中指定属性值： document.getElementsByTagNam
IE事件处理和W3C事件处理的区别
ruby_xc的博客
07-17 1127
  注意: W3C事件的 target 与 currentTarget 的区别？ target 只会出现在事件流的目标阶段 currentTarget 可能出现在事件流的任何阶段 当事件流处在目标阶段时，二者的指向相同 当事件流处于捕获或冒泡阶段时：currentTarget 指向当前事件活动的对象(一般为父级) 手写事件侦听器(浏览器兼容)   // 手写事件侦听器 ...
JavaScript事件流模型
Just for funnnnnnnnnnnn
02-14 3611
事件流捕获流捕获流最早由网景公司开发的浏览器使用，在如下结构中<div> <button type='submit'></button> </div>div = document.querySelector('div'); div.onclick = function(event){ alert('div'); }; button = document.querySelector('butt
事件模型到底是什么？
yy521_的博客
08-01 1191
事件模型是个什么玩意？ 这两天在研究java的设计模式，到底什么是设计模式呢？通过多方面查找，得到下面的结论：设计模式就是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件...
掌握JavaScript事件绑定与事件流模型详解
本文将深入探讨JavaScript（JS）中的事件绑定和事件流模型，这对于理解和优化网页交互体验至关重要。JS事件主要分为以下几类： 1. 鼠标事件：包括`click`、`dbclick`、`mouseover`和`mouseout`，这些事件分别在用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值