js事件机制

页面中添加事件的几种方式

方式	代码	描述
直接将JS代码写在HTML上	<div onclick="alert('欢迎访问Nowamagic.net');">Nowamagic</div>HTML Element元素自身就拥有了很多onXXX属性，只需将JS代码赋值给其就可以了。赋值给onXXX的字符串将作为响应函数的函数体	冒泡事件
定义一个函数，赋值给html元素的onXXX属性	<div onclick="clk()">Div2 Element</div>先定义函数clk，然后赋值给onclick属性	冒泡事件
使用element.onXXX方式	<div id="d3">Div3 Element</div><script type="text/javascript">      var d3 = document.getElementById('d3');    d3.onclick = function(){    }</script>	冒泡事件
addEventListener或attachEvent	<div id="d4">Div4 Element</div> <script type="text/javascript"> var d4 = document.getElementById('d4'); function clk(){alert(4)} if(d4.addEventListener){ d4.addEventListener('click',clk,false); } if(d4.attachEvent){ d4.attachEvent('onclick',clk); } </script> 注意attachEvent的第一个参数需要加上个"on"，addEventListener第三个参数为false表示事件冒泡，attachEvent没有第三个参数，默认就是冒泡，没有捕获。

事件的发生顺序

事件捕获当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。事件冒泡当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件，Mozilla，Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持

W3c模型

核心： 任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段作为开发者，可以选择是在捕获阶段还是在冒泡阶段绑定绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。假设你要做如果用户单击元素2，则接下来会发生：（事件在这里就像一个观光客，由外至内游览，逐渐接近被触发的主要元素，然后又反向离开）单击事件首先进入捕获阶段开始（逐渐接近元素2的方向）。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的发现元素1有一个，于是doSomething2被执行事件检查到目标自己（元素2），捕获阶段没有发现更多的处理函数了。事件开始进入冒泡阶段，想当然执行doSomething()，这个绑定于元素2冒泡阶段的函数。事件向远离元素2的方向，查看是否有任何祖先元素在冒泡阶段绑定了一个处理函数。没有这样的情况，所以什么也没有发生相反的情况是：现在如果用户点击元素2会发生：单击事件进入捕获阶段。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的，结果一无所获事件检查到目标自己。事件开始进入冒泡阶段，并且执行绑定于元素2冒泡阶段的函数。doSomething()事件开始远离目标，检查元素2的祖先元素中是否有在冒泡阶段绑定了处理函数的发现了一个，于是元素1的doSomething2()被执行兼容性和传统模式在支持w3c dom(文档对象模型) 的浏览器中，传统的事件绑定方法是默认被视为在绑定于冒泡阶段

执行顺序

var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 执行顺序为method3->method2->method1如果是Mozilla系列，并不支持该方法，需要用到addEventListenervarbtn1Obj = document.getElementById("btn1"); //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false); 执行顺序为method1->method2->method3具体事例；http://www.jb51.net/article/67051.htm参考：http://www.nowamagic.net/librarys/veda/detail/1304http://blog.jobbole.com/39446/http://www.jb51.net/article/42492.htmhttp://www.jb51.net/article/32832.htm