js 事件和事件处理

一般我们给一个元素添加事件，有两种方式

一个是0级DOM，直接在html中属性中添加各类事件

如

<html>
<body>
    <div id="div1" onclick="fn1()">div1
        <div id="div2">div2
            <div id="div3">div3</div>
        </div>
    </div>
</body>
</html>

还可以在js中添加相应事件

<script>
    document.getElementById("div1").onclick = fn1;  //处理函数是没有（）的，不然传递的就是函数的结果  
     function fn1(){
     alert("div1");
}

</script>

上面说的是两个比较常用的添加事件的方法，都是0级DOM事件

下面来看另外一种：2级DOM事件

DOM2级事件流：

一个事件流包含三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。

随意触发一个事件，比如click或者mouseover，这个事件就会产生一个事件流，然后先从目标对象的外层传入，然后处于目标对象之上，最后又传到外层。

addEventListener（type,fn,bool） //第一个参数是事件类型如“click”,fn指的是处理的函数，bool表示输入一个布尔值，如果为true,则指定事件句柄将在事件传播的捕捉阶段用于捕捉事件。如果参数为false,则事件句柄就是常规的，当事件直接发生在对象上，或发生在元素子女上，又向上起泡到该元素上的时候，被触发。

attachEvent(type,fn) //type是一个事件类型，如“onclick” ，这个与上面的方法不同，它是有on的，fn也是只的是处理函数。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #div1{
 7             background:red;
 8         }
 9         #div2{
10             background:blue;
11         }
12         #div3{
13             background:green;
14         }
15     </style>
16     <script>
17         window.onload = function () {
18             var eventHandler = {                  //事件类
19                 addEvent: function (element, type, fn) {             //添加事件
20                     if (element.addEventListener) {
21                         element.addEventListener(type, fn, false)   //true 先触发外部，在逐渐触发内部 ，false先触发内部，然后触发外部 
22                     } else if (element.detachEvent) {
23                         element.attachEvent("on" + type, fn);
24                     } else {
25                         element["on" + type] = fn;
26                     }
27                 },
28                 removeEvent: function (element, type, fn) {         //删除事件
29                     if (element.removeEvenListener) {
30                         element.removeEvenListener(type, fn, false);
31                     } else if (element.detachEvent) {
32                         element.detachEvent(type, fn);
33                     } else {
34                         element["on" + type] = null;
35                     }
36                 }
37             }
38 
39             var div1 = document.getElementById("div1");
40             var div2 = document.getElementById("div2");
41             var div3 = document.getElementById("div3");
42             eventHandler.addEvent(div1, "click", function () { alert("div1") });
43             eventHandler.addEvent(div2, "click", function () { alert("div2") });
44             eventHandler.addEvent(div3, "click", function () { alert("div3") });
45         }
46     </script>
47 </head>
48 <body>
49     <div id="div1">div1
50         <div id="div2">div2
51             <div id="div3">div3</div>
52         </div>
53     </div>
54 </body>
55 </html>

捕获阶段在 div1 处检测是否有 useCapture 为 true 的事件处理程序，若有，则执行该程序，然后再同样地处理 div2。

目标阶段在 div3 处，发现 div3 就是鼠标点击的节点，所以这里为目标阶段，若有事件处理程序，则执行该程序，这里不论 useCapture 为 true 还是 false。

冒泡阶段在 div2 处检测是否有 useCapture 为 false 的事件处理程序，若有，则执行该程序，然后再同样地处理 div1。

addEventListener－事件流

当一个事件发生时，分为三个阶段：

捕获阶段从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）

目标阶段触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。

冒泡阶段从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。

关于参数3 userCaoture,

true 的触发顺序总是在 false 之前；
如果多个均为 true，则外层的触发先于内层；
如果多个均为 false，则内层的触发先于外层。

之前我们0级DOM上面，一个事件只能绑定一个函数，用2级DOM则可以添加多个处理函数。

<script>
            var div1 = document.getElementById("div1");
            div1.addEventListener("click", fn1, false);
            div1.addEventListener("click", fn2, false);
//添加2个处理函数，fn1,fn2  ,而0级DOM是不可以的
</script>

2级DOM事件优点：

可以对同一物件的同一事件绑定多个事件处理程序。

可以通过事件流三个阶段更好地控制何时触发事件处理程序。

工作于 DOM 元素，而不仅是 HTML 元素。