javascript事件（一）
初学js的事件的时候，对它里面的事件流很感兴趣，js采用了两套事件处理流程，准确的说是以IE和其它的浏览器之间对于事件的处理过程不一样（IE总是特例独行，没什么不好的）。下面我说说他们的区别：
IE用的是事件冒泡法，比如body和body下的元素button同时具有click事件，那么它的执行事件就是先button的事件其次才是body的事件。而另外的是事件捕获，即从根节点开始执行，如上面的列子的执行顺序是先body的click再button的click。但是经过我的实验他们的输出是一样的，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> </style> </head> <body id="eventTest" onclick="clickOne()"> <div id="et" onclick="clickTwo()">点击这里</div> </body> <script src="myTest.js" type="text/javascript"></script> </html>
function clickOne()//js代码
{
alert("you click me first");
};
function clickTwo()
{
alert("you click me second");
};
输出的我用了IE的firefox但是输出的都是先
you click me second然后
you click me first
在来说说添加对元素的监听，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> </style> </head> <body id="eventTest"> <div id="et">点击这里</div> </body> <script src="myTest.js" type="text/javascript"></script> </html>
javascript代码：
var myelement=document.getElementById("eventTest"); var me=document.getElementById("et"); var clickOne = function testFun() { alert("you click me first"); }; var clickTwo = function testFun() { alert("you click me second"); }; myelement.addEventListener("click",clickOne,true); me.addEventListener("click",clickTwo,true);
很多书上说IE不支持addEventListener的用法但是我用IE测试的时候没出什么问题我用的是IE9，可能是IE9也兼容了这个方法，上面的例子输出的先是***first再是***second如果，你想把输出的顺序反一下，你可以把true参数改成false（第三的参数是用来决定你的事件流的流程的，当为true时就是采用了事件捕获的方式“从外向内”，如果为false时则采用了冒泡的方法）。
最后是DOM事件流（很多书上说IE不支持，但是我用IE9的时候好像都可以的吧，如有知道的请说说你的见解）：事件捕获——>处理目标阶段——>事件冒泡的阶段。因为还没有知道什么场合使用，就不多说了。