标签：
javaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种模型使用了我们的观察者模式，支持页面的行为（JS代码）与页面的外观（HTML，CSS）之间的松散耦合。当浏览器发展到第四代时，IE和Netscape开发团队使用了两个完全相反的事件流概念，IE的事件流是事件冒泡流，而Netscape的事件是事件捕获流。
所谓事件冒泡，就是指该事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点；
<html>
<head>
<title>createElement() Example</title>
</head>
<body >
<div id="div1">
Click
</div>
</body>
</html>1.div
2.body
3.html
4.document
这个click会从我们点击的元素div上发生，然后再沿着dom树向上传播，在每一级节点上都会发生，直到传播到document对象;
事件捕获的思想是从不太具体的节点开始接收事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。如果仍然以前面的HTML页面作为演示事件捕获的例子，那么单击DIV元素就会以下顺序出发click事件。
1.document
2.html
3.body
4.div
在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，即div元素。
规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段首先是事件捕获，为截获事件提供了机会。然后是实际的目标接到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
[)K3JJ2P2TWS`1}GEQ.jpg)
事件处理程序
事件是指用户或浏览器的某种动作，比如click,load都是事件的名字，而响应某个事件的函数就叫做事件处理程序，事件处理程序都是以on开头的（至少在JS里面是);
指定事件处理程序会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event,也就是事件对象。
<input type="button" value="Click" onclick="alert(event.type)">
<input type="button" value="Click" onclick="alert(this.type)">
在这个函数内部，可以像f访问局部变量一样访问document及该元素本身的成员。这个函数使用with扩展作用域
<script>
function(){
with(document){
with(this){
}
}
}
</script>这样我们可以直接访问该目标元素
<input type="button" value="Click" onclick="alert(type)">经测试发现很多浏览器已经自动的做了扩展作用域，也就是说你不加上那段js代码，这样直接访问也是可以的；
事件句柄和事件接听器
事件句柄（又称事件处理函数，DOM称之为事件监听函数），用于响应某个事件而调用的函数称为事件处理函数
。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。
我们认为响应点击事件的函数是onclick事件处理函数。以前，事件处理函数有两种分配方式：在JavaScript中或者在HTML中。
<html>
<head>
<title>createElement() Example</title>
</head>
<body >
<div id="div1">
<input type="button" value="Click" id="mybt">
</div>
</body>
<script>
var btn=document.getElementById("mybt");
btn.onclick=function(){
alert("点击事件");
}
</script>
</html>上面的处理方式我们称之为DOM0级事件处理程序，后来又诞生了DOM2级事件处理程序，它定义了两个方法，用于处理指定和删除事件处理程序的操作，addEventListener和removeEventListener()。
所有DOM节点都包含这两个方法，并且它们都接收处理的事件名，作为事件处理程序的函数和一个布尔值。true表示在捕获阶段调用事件处理程序；false则表示在冒泡阶段调用事件处理程序。
<script>
var btn=document.getElementById("mybt");
btn.addEventListener("click",function(){
alert(this.id);
},false);
</script>标签：
原文地址：http://blog.csdn.net/liaodehong/article/details/51712692
