HTML 事件机制

sangeshitou

浏览: 27582 次
性别:
来自: 杭州

最近访客更多访客>>

killergxm

shizhe0612

合一以恒

levin_china

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

HTML 浏览器 JavaScript

页面上点击一个按钮，浏览器做了什么？

今天我们就浅浅的了解下，浏览器到底干了什么。

当页面触发一个事件的时候，浏览器主要做了三个阶段的事情：

capture phase：捕获事件阶段
target phase：目标处理阶段
bubble phase：后续事件处理阶段

capture阶段就是当事件被触发的时候，产生事件对象，传递事件对象，最终找到目标元素触发事件。

那么事件是如何传递的呢？

浏览器会产生一个Event对象，包含目标元素的标识，事件名称等信息
然后，浏览器从DOM结构的根节点开始向各个也节点分发Event对象

从根节点到目标节点的父节点，这个过程就叫做capture阶段。

target阶段指Event对象到达了目标节点。

当Event对象到达了目标节点，目标节点将会马上执行注册好的监听器。

event.preventDefault();

以上代码阻止了元素的默认行为，比如a标签的默认行为是打开href定义的页面。

bubble阶段是指当target阶段结束后，从目标节点反向的传递到跟节点的过程。

我们可以通过

event.stopPropagation();

来阻止向上传递的过程。

具体序列图如下：

那么HTML是如何约束这个机制的呢，我们来看下整体的接口：

以上是HTML接口图：

Event接口规定了产生的事件的详细信息，包含事件目标对象，事件是否可以取消，事件所处的阶段等等信息。

CustomEvent则是Event的扩展，提供了第三方的扩展性。

DocumentEvent则是负责Event对象的产生。

EventListener规定了事件监听器的主要行为。

EventTarget负责Event对象的分发和事件监听器的注册以及响应。

我们来看一个实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
	<div id="d" onclick="alert('this is bubble phase');"> 
		this is div
		<a id="a" href="#" onclick="alert('target');">test</a>
	</div>
 </BODY>
 <script type="text/javascript">
	document.getElementById("d").addEventListener('click',function(){
		alert("this is capture phase");
	},true);
 </script>
</HTML>

点击test连接的时候，alert的顺序