javascript--DOM事件流

说明：DOM结构是一个树状结构(文档对象模型)，事件发生时在元素节点之间按照特定的顺序传播，即DOM事件流。

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件流模型

在DOM兼容浏览器中，事件流分为3个阶段：

（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。

当事件在某一DOM元素被触发时事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。

冒泡阶段：如果addEventListener第三个参数是false则处于捕获阶段执行顺序 div2->div1->body->html->dom

 var div2=document.querySelector(".div2");div2.addEventListener('click',function () {alert("div2");},false);var div1=document.querySelector(".div1");div1.addEventListener('click',function () {alert("div1");},false);

捕获阶段：如果addEventListener第三个参数是true则处于捕获阶段执行顺序 dom->html->body->div1->div2

 var div2=document.querySelector(".div2");div2.addEventListener('click',function () {alert("div2");},true);var div1=document.querySelector(".div1");div1.addEventListener('click',function () {alert("div1");},true);

javascript--DOM事件流相关推荐

html流动模型,javascript的事件流模型都有什么？
事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的.事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同. JavaScript ...
理解DOM事件流的三个阶段 - Lxxyx的开发笔记 - SegmentFault 思否
本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段起因在学习前端的大半年来,对DOM事件了解甚少.一般也只是用用onclick来绑定个点击事件.在寒假深入学习JavaScript时,愈发 ...
JavaScript-浅谈DOM事件流
什么是事件?(敲黑板) 事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.(by <JavaScript高级程序设计>) 比如鼠标点击,双击,滚动条滑动... 什么是事件流? 先来看一个 ...
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
带你理解DOM事件流
在做前端开发的时候,我们经常需要做一些各式各样的交互,如鼠标单击/双击/滑动事件.键盘事件等等等等,这些都是DOM事件.首先我们先看一个概念,叫DOM事件流. DOM事件流事件流:事件在目标元素和祖 ...
IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件示例: <body> <div> <butt ...
addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡
当一个HTML元素触发一个事件时,该事件会在元素结点与根结点之间的路径传播.传播按顺序分为三个阶段:捕获阶段.目标阶段.冒泡阶段,这个传播过程就是 DOM 事件流. 事件冒泡就是当一个HTML元素出发 ...
“约见”面试官系列之常见面试题之第六十一篇之IE和DOM事件流（建议收藏）
什么是"事件流"? 事件流描述的是从页面中接收事件的顺序事件流的种类: 事件流主要分为三种事件冒泡流(IE事件流):事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然 ...
html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
DOM事件流三个阶段
DOM事件流三个阶段 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...

javascript--DOM事件流

javascript--DOM事件流相关推荐

最新文章

热门文章