首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。
当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。
当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。
说到这里,关键的问题来了,那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了。
为了更好地理解冒泡的概念,我建议你现在想象一下你的面前放着一杯水,但这杯水和我们平时看到的有点点不同,它分为数层,每一层又分成一或多个区域,最顶层是我们熟悉的窗口对象(即window对象),下一层分为好几个区域(document对象、history对象等等),而document对象的下一层又分为多个子对象。
这些对象的层次关系构成了DOM中的对象树。
事件的传播是有方向的,当点击一个按钮时所产生的事件从这个按钮处开始向上传播(就像一个水泡从杯底冒上来,这就是之所以叫事件冒泡的原因),但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义(即该属性指向一个存在的函数或一段可执行的语句),如果有,执行这个函数或语句;然后事件继续向上传播,到达按钮的上一层对象(例如一个form对象或document对象,总之是包含了按钮的父对象),如果该对象也定义了onclick属性,则执行属性的值。
所以,如果这个按钮上面有3层(form、document、window),且这三层都定义了onclick属性,则当按钮的click事件产生时,将会调用4个(包括按钮本身的一个)函数或执行4段语句。
事件的这几个特性在0级dom中也是适用的。
<html onclick="alert('html')">
<head>
<title>Event Propagation Example</title>
</head>
<body onclick="alert('body')">
<input type="button" value="Click Me" onclick="alert('input')" />
</body>
</html>
分享到:
相关推荐
上面例子的html文件 博文链接:https://zhyt710.iteye.com/blog/227892
JavaScript的事件;认识事件;JavaScript的事件;JavaScript的事件;JavaScript的事件; 注册和删除事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件; 事件...
JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件...
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
第6章 JavaScript中的事件与事件处理
javascript表单事件汇总,纯文本格式
1.实现JavaScript事件注册;...2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
与Java语言不同的是,JavaScript中可以通过throw语句抛出所有类型的值,而不仅止于抛出错误对象。 代码如下: //Throw an Error object. try{ throw new Error(“Message in Error Object”); }catch(e){ ...
javascript的事件大全,很详细的介绍
1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,...
实现JavaScript 动态加载事件
JavaScript中的所有on事件介绍
javascript 触发事件列表 单击事件___onclick 用户单击鼠标按键时产生的事件.同时onclick指定的事件处理程序或代码将被调用执行. 如:打开页面" onlick="window.open ('xxxx.html','newwindow','width=456,height=...
Javascript_事件处理,讲解了JAVASCRIPT事件开发中注意的事项,步骤,有条理的讲解
第三章 JavaScript事件 第三章 JavaScript事件 第三章 JavaScript事件
JavaScript详细事件列表 包含JavaScript所有事件
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
javascript事件列表解说.doc
JavaScript事件机制详细研究
里面提供了 所有的鼠标事件的汇总 对刚开始接触JS的很有用处 在实际的开发中 不能离开的一个文本