Javascript事件传播

MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素.这种自底向上的事件传播方式称为"事件冒泡". 在基于W3C标准的浏览器中,事件传播首先是从最外层的元素传播到最内层的目标元素(这称为事件的"捕获"阶段),然后事件的传播讲反转方向,从最内层的元素在冒泡到最外层的元素. 回顾addEventListener()方法和removeEventListener()方法…

javascript 事件传播与事件冒泡，W3C事件模型

说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这就叫做"事件冒泡".然而,事情要是这么简单的话,相信笔者这时一定已经迎娶了白富美,当上了CEO.坏就坏在后来又听说一个"事件传播" ,尼玛不是"事件冒泡"吗,然后又听说了"W3C事件模型"...到了最后笔者彻底心碎了,只能乖乖的当…

JavaScript中的事件冒泡？事件传播的解释

注:本文来源可译网事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒泡仅仅是难题的一部分.它经常和事件捕获和事件传播一起被提及,并且对这三个概念有着很深的了解是学习javaScript事件必不可少的,例如,假如你想实现事件委托. 在这篇文章中,我会解释这些术语,并展示它们如何组合在一起.我还将向您展示如何对JavaScript事件流的基本了解可以让您对应用程序进行细…

【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

前言这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获在下才疏学浅,文中难免会有不同程度的错误,请您指正留言 PS:事件阶段一节请看最新博客,之前理解有误 javascript事件基础我们的网页之所以丰富多彩并具有交互功能,是因为我们的javascript脚本语言,而javascript与HTML之间的交互又是通过事件机制实现的所以,事件是javascript一…

JS 传播事件、取消事件默认行为、阻止事件传播

1.事件处理程序的返回值通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的onclick事件处理程序通过返回false阻止跳转href页面.类似地,如果用户输入不合适的字符,输入域上的onkeypress事件处理程序能通过返回false来过滤键盘输入. 事件处理程序的返回值只对通过属性注册的处理程序才有意义. 2.调用顺序文档元素或其他对象可以为指定事件类型注册多个事件…

【repost】JavaScript 事件模型事件处理机制

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. 今天的事件在漫长的演变史,我们已经告…

javaScript事件（一）事件流

一.事件事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应.典型的例子有:页面加载完毕触发load事件:用户单击元素,触发click事件. 二.事件流 1.事件流感性认识问题:单击页面元素,什么样的元素能感应到这样一个事件?答案:单击元素的同时,也单击了元素的容器元素,甚至整个页面.例子:有三个同心圆, 给每个圆添…

[解惑]JavaScript事件机制

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

总结JavaScript事件机制

JavaScript事件模型在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持. 原始事件模型: 在原始事件模型中(也有说DOM0级),事件发生后没有传播的概念,没有事件流.事件发生,处理,结束,就这么简单.监听函数只是元素的一个属性值,通过指定元素的属性值来绑定监听器.书写方式有两种: (1) HTML代码中指定属性值:<input type=”…

解析Javascript事件冒泡机制

本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/23927347 ----------------------------------------------------------------------------------------------------------------------------------------- 1.…

javascript事件执行流程分析

我一直想搞清楚事件在DOM中的传播方式,今天经高人指点终于明白一二.首先扒了一张图: 事件捕获过程:当我们点击TEXT时,首先是window->document->body->div->text.这个过程称为事件捕获,W3C浏览器的标准执行流程. 事件冒泡过程:text->div->body->document->window.这个过程称为事件冒泡.IE浏览器只支持冒泡,不支持捕获.W3C浏览器先执行捕获,后执行冒泡. 再来看看addEventLister(…

Javascript事件模型系列（一）事件及事件的三种模型

一.开篇在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加百度的实习生面试,被问到事件模型,当时被问的一头雾水,平时敲onclick敲的挺爽,却没有关注到事件模型的整体概念.这个周末难得清闲,决定就javascript中的事件模型写个系列,算是对知识点的一个总结,也是对自己的一个交代. 初步计划分为以下几个部分: ① javascript事件的基本概念…

【探讨】javascript事件机制底层实现原理

前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如何实现的博客里面关于事件绑定与执行顺序一块理解有误,请看最新博客基础知识事件捕获/冒泡我们点击一个span,我可能就想点击一个span,事实上他是先点击document,然后点击事件传递到span的,而且并不会在span停下,span有子元素就会继续往下,最后会依次回传至document,我…

JavaScript事件机制——细思极恐

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

JavaScript——事件模型

DOM事件流: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流. 事件顺序有两种类型:事件捕捉和事件冒泡. 冒泡型事件(Event Bubbling) 这是IE浏览器对事件模型的实现,也是最容易理解的,至少笔者觉得比较符合实际的.冒泡,顾名思义,事件像个水中的气泡一样一直往上冒,直到顶端.从DOM树型结构上理解,就是事件由叶子节点沿祖先结点一直向上传递直到根…

详细的JavaScript事件使用指南

事件流事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档):如下代码: <div id = "div"> <span id="span"> <a id="aTag">事件测试&l…

深入理解JavaScript 事件

本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本文后的文字引用和图片引用均来自<JavaScript高级程序设计>,引用稍有改变原文,不改变意思. 本文仅作巩固基础之用,如果有不正确的地方,还望指出. 更好的排版可以点这里事件个人认为:不论是浏览器自带的事件,还是自定义事件,都是观察者模式的实现.更确切地说:事件流是会流动的,流到哪个节点,…

JavaScript事件详解

1.事件传播机制:事件冒泡,事件捕获. 2.注册事件处理程序方式: 设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,onmouseover,用法如下 <div id="div1" onClick="console.log('div1');"><div> html里面不区分大小写,所以事件处理程序属性名字 onClick 大小写可以混写若给同一元素写多个onc…

JavaScript事件---事件对象

发文不易,若转载传播,请亲注明出处,谢谢! 内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数. 一．事件对象事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息. 事件处理三部分组成:对象.事件处理函数=函数.例如:单击…

JavaScript事件---事件入门

内容提纲: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码. 一．事件介绍事件一般是用于浏览器和用户操作进行交互的.最早是IE和Netscape Navigator中出现,作为分担服务器端运算负载的一种手段.直到几乎所有的浏览器都支持事件处理.而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件.IE9.Firefox.Opera.Safari…

转：JavaScript事件冒泡简介及应用

(本文转载自别处) JavaScript事件冒泡简介及应用一.什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件…

JavaScript事件总结

JavaScript 事件总结本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本文后的文字引用和图片引用均来自<JavaScript高级程序设计>,引用稍有改变原文,不改变意思. 本文仅作巩固基础之用,如果有不正确的地方,还望指出. 事件个人认为:不论是浏览器自带的事件,还是自定义事件,都是观察者模式的实现.更确切地说:事件流是会流动的,…

Javascript事件绑定的几种方式

Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录.] 1.在DOM中,直接用onXXX="fun();"进行绑定 2.在Javascript代码中用 DOM对象.onXXX=fun 进行绑定 3.用 DOM对象.attachEvent("onXXX",fun) 进行绑定 4.用<script for=&q…

javascript事件捕获与冒泡

对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就像气泡从水底向水面上浮一样.而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目. 事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水…

JavaScript事件的几个细节

JavaScript事件的几个细节一.是捕获还是冒泡昨天被问到一个问题:事件流有几个阶段?在这几个阶段中,事件一共发生几次? 问题很简单,但对于事件一共发生几次有点乱.总觉得捕获也能触发事件.冒泡也能触发事件,可事件确实只发生了一回啊!所以写篇文章梳理一下,对此很清楚的同学可以跳过了. 子问题1:事件流有几个阶段? “DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 1. IE9以前的IE浏览器都只支持后两个阶段,也就是处于目标阶段和事件冒泡阶段.这个顺序…

JavaScript 事件模型事件处理机制

JavaScript事件处理程序的3种方式

最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript事件处理程序的3种方式: 一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可…