DOM事件探秘之一

1.事件流

事件是文档或浏览器窗口中发生的特定的交互瞬间。【JavaScript <——>HTML】

事件流：描述的是从页面中接受事件的顺序。其中IE使用的是事件冒泡流 / Netscape使用的是事件捕获流
简单理解为点击按钮时，也点击了按钮所在的容器以及容器至外地的容器一直到整个DOM

事件冒泡：即事件最开始由最具体的无素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节点（文档） input—–>document
事件捕获：与事件冒泡完全相反，从最不具体的节点开始到最具体的节点。

2.事件处理程序

2.1、HTML 事件处理程序

    <input type="button" id="btn1" value="按钮1" onclick="alert('Hellow.Sofia')">    <input type="button" id="btn2" value="按钮2" onclick="showMessage()">    <script>    function showMessage() {        alert("Hellow.Sofia");    }    </script>

像上面的两种按钮弹窗，直接把事件加载到html结构中的元素上的事件方法：叫做HTML事件
缺点：HTML和JS 代码紧密耦合在一起，如果需要改下内容或者函数名等，需要做两处修改（Html文档和Script脚本），后期维护会很不方便。

2.2、DOM 0级事件处理程序

    <input type="button" id="btn3" value="按钮3">    <script>    var btn3 = document.getElementById('btn3');    btn3.onclick=function(){        alert("这是通过DOM0级添加的事件");    }    </script>

较传统的方式 ：把一个函数赋值给一个事件的处理程序属性。用的比较多的方式 简单 跨浏览器的优势。
先取出HTML元素，再对该元素进行事件添加。eg：btn.onclick=function();
btn.onclick=null;//删除事件

2.3、DOM 2级事件处理程序

DOM 2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值—–事件冒泡（false）或事件捕获（true）。
eg：btn3.addEventListener('click',showMessage,false);

注意：
1、若事件名称有on，则需去掉on。eg：onclick-> click，onmouseover ->mouseover等等；
2、false 兼容所有浏览器—–事件冒泡流。
3、通过addEventListener添加的事件只能通过removeEventListener来删除。
4、 参数要一样：
btn.removeEventListener(参数); 和btn.addEventListener(参数)的参数一致

dom 0级和dom 2级事件处理程序 可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。

btn3.addEventListener('click', showMes, false);btn3.addEventListener('click', showMes, function() {          alert(this.value）;          }, false);

在事件被触发的函数里面，this可以引用被触发的元素。例如：btn.addEventListener('click',function(){alert(this.value),false});this即指btn

缺点：IE不支持该事件，因为IE有自己专用的事件处理程序。

2.4、IE事件处理程序

attachEvent()添加事件detachEvent()删除事件这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数，因为IE本身使用的就是事件冒泡流，所以这里不需要加布尔值。

eg：btn3.attachEvent('onclick',showMessage);这里事件处理程序名称与DOM 2级事件处理不一样，名称有on，仍保留on
支持IE事件处理程序的浏览器不多，只有IE和Opera两个。

2.5 跨浏览器的事件处理程序

到这里，我么会发现，如果选择了IE事件处理程序，那么除了IE和Opera这两个之外的浏览器都不能实现JS交互效果，同样的，如果选择dom 2级事件处理程序 ，IE和Opera这两个浏览器也不能实现JS交互效果。这样就衍生出跨浏览器的事件处理程序。
恰当的使用能力检测，逻辑为：如果支持DOM 2级事件处理程序，就使用它，否则使用IE事件处理程序，再者使用DOM 0级事件处理程序。
这些逻辑最好是封装在一个对象里，把对象放在一个变量eventUtil里，然后进行能力检测。

var eventUtil={            // 添加句柄            addHandler:function(element,type,handler){//三个参数：要处理的元素、要处理的事件名、作为事件处理程序的函数               if(element.addEventListener){                 element.addEventListener(type,handler,false);//DOM 2级事件处理程序，这里注意，事件名最好传没有on的click               }else if(element.attachEvent){                 element.attachEvent('on'+type,handler);               }else{                 element['on'+type]=handler;//老的浏览器不支持上面两个方法，则会在这使用DOM 0级事件处理程序。这里element.onclick==element[onclick]两者是完全等价的               }            },            // 删除句柄            removeHandler:function(element,type,handler){               if(element.removeEventListener){                 element.removeEventListener(type,handler,false);               }else if(element.detachEvent){                 element.detachEvent('on'+type,handler);               }else{                 element['on'+type]=null;               }            }         }        eventUtil.addHandler(btn3,'click',showMessage);

这样的话，同样的交互效果在IE、Crome等浏览器中都能很好的实现。

3.事件对象

在触发DOM上的事件时都会产生一个对象，包含了所有与事件相关的信息。
事件对象event
1、DOM中的事件对象 属性
（1）、type属性用于获取事件类型，鼠标点击对于click类型
（2）、target属性用于获取事件目标
（3）、stopPropagation()方法 用于阻止事件冒泡
（4）、preventDefault() 方法 阻止事件的默认行为
如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外）
如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法
如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法