【Spirit带你彻底了解事件捕获和冒泡机制】的更多相关文章

Spirit带你彻底了解事件捕获和冒泡机制

Dom标准事件模型 在Dom标准事件模型中,事件是先进行捕获,达到目标阶段时,在进行冒泡的 捕获阶段==>目标阶段==>冒泡阶段 目标元素和非目标元素 在介绍事件捕获和事件冒泡前 我们先要了解一下目标元素和非目标元素是什么意思 目标元素:它是我们当前触发事件的元素 非目标元素:它是在捕获阶段或着冒泡阶段中因为绑定了同类型的事件而触发的元素 每个Dom元素可以绑定多个事件,前提是使用addEvenetListener去添加事件,即使是相同的事件,也可以重复绑定. 事件捕获 从页面的根元素开始 一…

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

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

dom事件不求甚解，色解事件捕获和冒泡

以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了,请在评论里指出 首先,在页面上方4个div标签,一个嵌套个用来测试捕获和冒泡, 因为捕获和冒泡的重点是过程,而不是起点和重点,所以我只在中间的两个div small和meddiv 上绑定了事件 基本的html代码如下 <div id="bigdiv" style="wid…

javascript事件捕获与冒泡

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

js中addEventListener第三个参数涉及到的事件捕获与冒泡

js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型,比如点击(click).触摸(touchstart), 第二个参数就是事件函数, 比如我给一个button添加alert函数. window.onload=function(){ document.getElementById("hello").addEventListener("…

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

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

js事件捕获和冒泡解析

<div id="box"> <div id="box2"> <p id="test">test</p> </div> </div> <script> document.getElementById('box').addEventListener('click',function () { console.log('box') },true) document.g…

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

https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html JavaScript事件模型及事件代理 事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模型. 1.原始事件模型(DOM0级) 这是一种被所有浏…

JavaScript高级程序设计笔记 事件冒泡和事件捕获

1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> </body> 如果在body和div内都注册了click的事件监听,之后又点击了div区域,是body先响应还是div先响应?有意思的是,当时的浏览器开发团队IE和Netscape提出了差不多完全相反的事件流的概念.IE的事件流是事件冒泡流,而Netscape提出的事件流是事件捕获流. IE的事件…

js之事件冒泡和事件捕获介绍

链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定). (3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生.两种事件流会触及DOM中的所有对象,从docu…