【JavaScript事件捕获冒泡与捕获】的更多相关文章

初始js闭包&事件的冒泡和捕获&EVENT对象

一.初识闭包 function a(){   var n = 0;   this.inc = function () {     n++;     console.log(n);   }; } var c = new a(); c.inc();  //控制台输出1 c.inc();  //控制台输出2 什么是闭包?这就是闭包! 有权访问另一个函数作用域内变量的函数都是闭包.这里 inc 函数访问了构造函数 a 里面的变量 n,所以形成了一个闭包. function a(){  var n = 0…

react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 知识点 在原生的dom模型上触发的事件会进行事件传递.而所谓的事件传递指的是当在A元素上触发某一事件的时候,B元素如果满足了和A元素一定的关系的话,那么B元素上也可能触发改事件(即使B元素未添加该事件): dom模型是怎样的呢?如何一组dom元素可以看成一个是一个家族的族谱,那么我们就可以把dom元…

JavaScript事件捕获冒泡与捕获

事件流 JavaScript中,事件流指的是DOM事件流. 概念 事件的传播过程即DOM事件流.事件对象在 DOM 中的传播过程,被称为"事件流".举个例子:开电脑这个事,首先你是不是得先找到你的电脑,然后找到你的开机键,最后用手按下开机键.完成开电脑这个事件.这整个流程叫做事件流. DOM事件流 DOM事件,也是有一个流程的.从事件触发开始到事件响应是有三个阶段. 事件捕获阶段 处于目标阶段 事件冒泡阶段 上面例子中,开电脑这个事件的过程就像JavaScript中的事件流,找开机键这…

从零开始的全栈工程师——js篇2.20（事件对象 冒泡与捕获）

一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp string 二.事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:onmouseover onmouseout onmousedown onmousemov…

浅析JavaScript事件流——冒泡

一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传令兵接到士官战事信息,打出旗语,百米之外的第二个传令兵看到后打出同样的旗语,第三个,第四个....,直到信息传到诸葛亮手中.用专业术语解释就是:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直…

jQuery/Javascript 事件停止冒泡

Demo: <div id='wrap'> <button id='btn'>btn</button> </div> 一般情况下,两个元素分别添加点击事件,结果应该是两个事件按层级顺序触发(从里到外的顺序), 为了停止这种无止境的冒泡,我们加入 event.stopPropagation(),结果只触发 alert('b'); $('#wrap').on('click',function(){ alert('a'); }); $('#btn').on('cl…

JS事件冒泡与捕获

1事件传播——冒泡与捕获 默认情况下,事件使用冒泡事件流,不使用捕获事件流.然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. 2冒泡事件流 当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件.在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标…

JavaScript事件流原理解析

一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国庆的这段时间来补一补这个不足,也为了国庆后能够更好的完成公司的业务打下基础 二.大致了解什么是JavaScript事件流 首先这里先来举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta chars…

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

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

JavaScript事件流

什么是JS事件流 早期的IE事件传播方向为由上至下,即从document逐级向下传播到目标元素:而Netscape公司的Netscape Navigator则是朝相反的方向传播, 也就是从目标元素开始向上逐级传播最终至window. 后来ECMAScript在DOM2中对事件流进行了进一步规范,基本上就是上述二者的结合.当事件发生时,最先得到通知的是window,然后是document,由上至下逐级依次而入,直到真正触发事件的那个元素(目标元素)为止,这个过程就是捕获.接下来,事件会从目标元素开…

7-74 JavaScript 事件

7-74 JavaScript 事件 学习要点 掌握常用的javaScript事件 基本概念 事件是一些特定动作发生时所发出的信号,JavaScript中的事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些事件.比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数. 事件处理(添加事件) (HTML事件处理)内联方式添加事件将事件看做标签的一个属性,与HTML混写,代码多时不容易管理 (DOM0级事件处理)脚本方式添加事件,实现了HTML…

Dom捕捉事件和冒泡事件-原理与demo测试

先参考一下百度百科对冒泡事件流的解释: ----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了! http://baike.baidu.com/link?url=kaeJHTii_1uVgxD_d4LGnqR2mSlNGtEMw8Y9uRZKq_LJjBmmG3lHi9imKniETjpPFPUn4bFCy9dRJ_jfwSzVkK DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技…

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

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

JavaScript事件——冒泡、捕获

本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程就是DOM事件流. DOM事件标准定义了两种事件流,分别是捕获事件和冒泡事件. 1.冒泡事件流 默认情况下,事件使用冒泡事件流.当事件(例如单击…

Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制

一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监听函数.以下面的HTML结构为例: <div id="parentdiv"> 父亲 <div id="childdiv">孩子</div> </div> 执行的流程应该是这样的: 下面是一组例子,分别点击孩子节点可以清楚的…

[JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件发生的时候出发某个函数,该 Event 对象将自动在函数内可用,该对象包含了很多事件触发时候的信息, 但 IE 却没有这么实现,而是自己实现的,IE 浏览器是通过全局对象 window 下的 event 属性来包含这些信息 function myEventHandler(e) { // 注意参数e…

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

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

【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎…

[JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队提出了两种完全相反的事件流. 冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面.…

JavaScript事件：事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div class="content"> 27 <div class="box"> 28 29 </div> 30 </div> 31 </div> 32 <script type="text/javascript&…

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部分会拥有某个特定事件,例子:在纸上画一组同心圆,如果手指放在同心圆上,那么手指向的不是一个圆,而是纸上所有的圆.在页面中也是,如果点击了某个按钮,同时也单击了按钮的容器元素,甚至也单击了整个页面 事件流:页面接收事件的顺序,IE和Netscape最开始提出了两种概念,两种事件冒泡流,事件捕获流 <!…

JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差.     2.必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间. 怎样处理由于事件较多引起的性能差: 1.采用事件委托技术,限制简历的连接数量 2.在不需要的时候移除事件处理程序 例子: html: <div id=…

javascript --- 事件冒泡与事件捕获

事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行脑补 <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪…

【转】JavaScript 事件顺序：冒泡和捕获

补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | | | ------------…

JavaScript事件冒泡与捕获

event.preventDefault();    如果event.cancelable的值为true,可以取消默认事件 event.cancelable;             元素是否可以取消默认事件,true可以取消,false不可以取消,IE8不支持 event.cancelBubble;         true:设置当前事件不冒泡,false:设置当前事件冒泡 event.stopPropagation();  停止当前事件的分发,不论当前事件是在冒泡还是在捕获阶段 事件——怎样…

javascript -- 事件捕获，事件冒泡

使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会有事件冒泡,又有捕获呢?应为当初IE浏览器和Natscape浏览器分别对自己浏览器的事件采用了不同的发生机制,IE浏览器采用了冒泡型:定义有相同事件的嵌套元素,当事件被触发时,子元素拥有优先权,即从里向外发生,像水里的泡泡一样从里向外冒.而Netscape采用了相反的做法,即捕获型,父元素拥有优先权…

JavaScript 事件(捕获和冒泡 兼容性写法)

事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick  onchange onfocus onblur 等等 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫event的对象上. 我们把他叫事件对象 事件对象 event…

一个DOM元素绑定多个事件时，先执行冒泡还是捕获

绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 . 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 首先来了解一下冒泡和捕获是怎么回事: 1.冒泡 冒泡是从下向上,DOM元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的的祖元素绑定的事件会向上顺序执行.如下代码所示,…

生动详细解释javascript的冒泡和捕获，包懂包会(转)

前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在这里分享给大家. quirksmode的一系列文章都不错,通俗易懂,这篇只是一系列中的某一篇,有机会把javascript这系列都翻译给大家. 原文地址在这里http://www.quirksmode.org/js/events_order.html,句子中有标注“(?)”表示我对这个句子不是很理解…

2014年辛星解读Javascript之DOM之冒泡和捕获

上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开它的神奇面纱,彻底的解读它. 首先看例如以下代码: <html> <body> <div id = "demo"><p id = "tag">辛星</p></demo> <script typ…