Js事件捕获和冒泡

昨天有个面试官问我的问题,他直接问我两个DIV嵌套,都有click事件,单击的时候先弹出子DIV还是父DIV。完全不知所以然。

过后经过查询资料后,很是惭愧。原来他问的就是关于JS捕获和冒泡的。

我查询了一些资料:

事件捕获(父--》 子)

当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡(子--》 父)

当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

W3C模型

W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

那么程序员能不能自己选择触发哪种事件呢?当然可以。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener(‘click‘,doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式

在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

ele.onclick = doSomething2

但是IE浏览器不支持这个addEventListener、也没有三个参数、也不支持事件捕获。但是IE也有一个函数,attachEvent 

ele.attachEvent("onclick", doSomething2);

附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。

下边的内容是从其他博客摘过来的,可以借鉴http://blog.csdn.net/xqf309/article/details/8557493

做个小测试。感受一下冒泡事件。

时间: 2024-09-29 19:38:47

Js事件捕获和冒泡的相关文章

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的捕获与冒泡问题

事件冒泡与事件捕获,下面是js中捕获与冒泡的一个实例: html结构: <div id="tianzi"> <div id="tianzi1"> <div id="tianzi2"> <div id="tianzi3"> </div> </div> </div> </div> css样式控制: #tianzi{ width: 400

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

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

js事件流机制冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netscape --> 事件捕获流 查看源码:DOM2事件-捕获-冒泡 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 我们先来个简单的例子,这是HTML结构 <!DOCTYP

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

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

JS中的事件顺序(事件捕获与冒泡)

问题 如果一个元素和它的祖先元素注册了同一类型的事件函数(例如点击等), 那么当事件发生时事件函数调用的顺序是什么呢? 比如, 考虑如下嵌套的元素: ----------------------------------- | outer | | ------------------------- | | |inner | | | ------------------------- | | | ----------------------------------- 两个元素都有onclick的处理

事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮

clientX/Y           可视区的鼠标坐标                  全兼容 offsetX/Y           鼠标坐标到物体边框的距离    IE+Chrome pageX/Y             页面                                    高级 浏览器 screenX/Y           屏幕                                    全兼容(没用) var e =  evt || window.

事件捕获和冒泡

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #d74200 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #4f5d66 } p.p4 { margin: 0

javascript事件捕获与冒泡

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