DOM事件机制(事件捕获和事件冒泡和事件委托)

深入理解DOM事件机制系列第三篇——事件对象

× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为前面的话在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.所有浏览器都支持event对象,但支持方式不同.本文将详细介绍事件对象获取事件对象 [1]一般地,event对象是事件程序的第一个参数 [注意]IE8-浏览器不支持 //IE8-浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent] <div i…

DOM事件机制解惑(摘)--事件的传播机制

DOM事件流为什么是有事件流? 假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button上的事件呢,这就需要一种约定去规范事件的执行顺序,就是事件执行的流程. 浏览器在发展的过程中出现实了两种不同的规范 IE9以下的IE浏览器使用的是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. Netscapte采用的是事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件…

[解惑]JavaScript事件机制

群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会总结下问题的结论,顺便说说相关知识的扩展~ 如果贸然回答还会冒泡,这不太好的,稍微严谨点考虑 0级 DOM 事件模型的话,这个答案是否定的.但是在 2级 DOM 事件模型中,答案是肯定的,这个问题值得探讨记录下. 本文地址:http://www.cnblogs.com/hustskyking/p/p…

javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层.而你不管在水的哪一层观察都可以看到并捕捉到这个气泡.好了,把“水”改成“DOM”,把“气泡”改成“事件”.这就是“事件冒泡” 什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate One…

JavaScript系列----事件机制

1.事件流 1.1.标准事件流所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件流. <!DOCTYPE HTML> <html> <body> <div> <button>click</button> </div> </body> </html> 在上面的代码中,如果点击按钮bu…

JavaScript事件机制——细思极恐

JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? 3. 冒泡能够阻止,那捕获能够阻止吗? 4. jquery的on或bind是冒泡,还是捕获? 5. 两种事件方式的应用场景是? 示例 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=…

Aa3.0 事件机制

说明:本文由多处网络文章整理而成,在此未一一注明原文链接,敬请谅解! AS3:事件流机制事件流只要发生事件,Flash Player就会调度该事件对象. 如果事件目标不在显示列表中,则Flash Player将事件对象直接调度到事件目标. 如果事件目标在显示列表中,则Flash Player将事件对象调度到显示列表,然后该事件对象将在显示列表中进行一次从舞台到“目标节点”的往返行程. 事件流说明事件对象如何在显示列表中穿行,分为三部分: 第一部分称为捕获阶段,该阶段包括从舞台到目标节点的父…

JavaScript事件起泡与捕获

// 向 <div> 元素添加事件句柄 document.getElementById("myDIV").addEventListener("mousemove", myFunction); // 移除 <div> 元素的事件句柄 document.getElementById("myDIV").removeEventListener("mousemove", myFunction); addEvent…

js的事件机制二

js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签单双击-----用户会进行点击动作的HTML元素鼠标事件 ---用户会进行鼠标移动的操作的键盘事件----用户会进行键盘操作的HTML元素 2.给HTML添加多个事件时,注意事件的冲突举个例子:单击和双击当事件的触发条件包含相同部分时候,会产生事件之间的冲突. 3.事件的阻断当事件所监听的函数的将返回值返回给事件时 false:则会阻断当前所在HT…

ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）

前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事件机制.通过dapm事件机制,widget可以对它所关心的dapm事件做出反应,这种机制对于扩充widget的能力非常有用,例如,对于那些位于codec之外的widget,好像喇叭功放.外部的前置放大器等等,由于不是使用codec内部的寄存器进行电源控制,我们就必须利用dapm的事件机制,获得相应的…

【Python下进程同步之互斥锁、信号量、事件机制】

" 一.锁机制: multiprocess.Lock 上篇博客中,我们千方百计实现了程序的异步,让多个任务同时在几个进程中并发处理,但它们之间的运行没有顺序.尽管并发编程让我们能更加充分的利用io资源,但是也给我我们带来了新问题,多个进程使用同一份数据资源的时候,就会引发数据安全或顺序混乱问题. 例: # 多进程抢占输出资源 from multiprocessing import Process from os import getpid from time import sleep from…

Redis的事件机制

目录一.Redis的运行过程二.事件数据结构 2.1 文件事件数据结构 2.2 事件事件数据结构 3.3 事件循环三.事件的注册过程 3.1 文件事件的注册过程 3.2 时间事件的注册过程四.套接字文件事件 4.1 TCP连接建立事件 4.2 客户端套接字读事件 4.3 向客户端返回数据 Redis程序的运行过程是一个处理事件的过程,也称Redis是一个事件驱动的服务.Redis中的事件分两类:文件事件(File Event).时间事件(Time Event).文件事件处理文件的读写操作…

搞清楚Spring事件机制后：Spring的源码看起来简单多了

本文主讲Spring的事件机制,意图说清楚: 什么是观察者模式? 自己实现事件驱动编程,对标Spring的事件机制彻底搞懂Spring中的事件机制,从而让大家本文内容较长,代码干货较多,建议收藏后持续阅读. Spring框架已然是Javaeee开发领域的霸主,无论是使用SpringBoot还是SpringCloud,都离不开Spring框架. 作为Java开发者,无论是面试求职还是日常开发,就必须得熟练掌握.运用Spring框架. 因此学习Spring框架源码也就成为了大家最重要的事情之一.…

WebApis中DOM执行机制的认识

1.1. 节点操作 1.1.1 删除节点 node.removeChild() 方法从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 var ul = document.querySelector('u…

DOM事件机制(事件捕获和事件冒泡和事件委托)

内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器下面的链接描述了所有事件:https://developer.mozilla.org/en-US/docs/Web/Events (2)事件绑定事件绑定有3种方法,前两钟方法在这里不介绍,主要看第三种: addEventListener方法(使用事件监听绑定事件) addEventListener: 1 e…

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(…

js事件机制——事件冒泡和捕获

概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发, 即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(target)触发, 即事件捕获. W3C标准将两者进行中和,在任何的W3C的事件…

JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. 无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事…

JS Event事件流（冒泡机制、捕获机制、事件绑定）

1.事件流事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到window对象,只有IE8及下不这样): 再多说一句,现在的浏览器默认是采用的是事件…

js事件捕获，事件冒泡，事件委托以及DOM事件流

一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body→div ②处于目标阶段2:实际的目标到事件 ③事件冒泡阶段:由最具体的元素接收到事件,然后向上传播到较为不具体的节点.事件流模型:div →body→ html→ document 二:事件委托事件委托顾名思义:将事件委托给另外的元素.其实就是利用DOM的事件冒泡原理,将事件绑定到目标元素的父节…

javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)

前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript代码)与页面的外观(HTML和CSS代码)之间的松散耦合. 事件处理程序事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字. 而响应某个事件的函数就叫做事件处理程序(或事件侦…

w3c标准 dom对象事件冒泡和事件捕获

http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(css) 2.行为(dom,ecmscript) 3.结构(xml ,xhtml) Dom对象模型是什么? dom对象模型包括事件捕获模型和事件冒泡模型,两个事件流会触发所有的对象,从document开始到document结束 1.事件冒泡行为:从最精确的目标到最不精确的目标进行触发 2.事…

javascript中的事件冒泡、事件捕获和事件执行顺序

谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式. 1事件传播--冒泡与捕…

DOM事件机制进一步理解

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <style type=&…

js：捕获冒泡和事件委托

一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒泡和捕获则描述了两种不同的顺序. DOM2级事件规定事件流包括三个阶段,如图: 假如我们点击一个div, 实际上是先点击document,然后点击事件传递到div,而且并不会在这个div就停下,div有子元素就还会向下传递,最后又会冒泡传递回document,如上图为了兼容更多的浏览器…

彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）

由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其实这部分就是“事件委托”,而当时的我并不知道,这一点在我很久之前的评论中纠正过. 归根结底,是当时的我对dom事件这个东西没有一个系统的认识.事件模型.事件流.event对象.事件代理/委托.甚至自定义事件,加起来才是dom事件的全貌,都理解了才能彻底弄懂.本想删除了事,但抱着尊重历史的态度(其实是…

【DOM事件机制(事件捕获和事件冒泡和事件委托)】的更多相关文章

深入理解DOM事件机制系列第三篇——事件对象

DOM事件机制解惑(摘)--事件的传播机制

[解惑]JavaScript事件机制

javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。

JavaScript系列----事件机制

JavaScript事件机制——细思极恐

Aa3.0 事件机制

JavaScript事件起泡与捕获

js的事件机制二

ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）

【Python下进程同步之互斥锁、信号量、事件机制】

Redis的事件机制

搞清楚Spring事件机制后：Spring的源码看起来简单多了

WebApis中DOM执行机制的认识

DOM事件机制(事件捕获和事件冒泡和事件委托)

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

js事件机制——事件冒泡和捕获

JavaScript 详说事件机制之冒泡、捕获、传播、委托

JS Event事件流（冒泡机制、捕获机制、事件绑定）

js事件捕获，事件冒泡，事件委托以及DOM事件流

javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)

w3c标准 dom对象事件冒泡和事件捕获

javascript中的事件冒泡、事件捕获和事件执行顺序

DOM事件机制进一步理解

js：捕获冒泡和事件委托

彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）

JS之捕获冒泡和事件委托

JS中的事件、事件冒泡和事件捕获、事件委托

dom事件机制系列

Javascript和jquery事件--事件冒泡和事件捕获