DOM事件处理

两种事件流：

• 事件冒泡 由具体的元素到不具体的元素，由小到大（所有浏览器）
• 事件捕获 有不具体的元素到具体的元素，由大到小（netscape）

html时间处理程序

就是把js写到html中，html和js紧紧地耦合在一起，当然这是极不推荐的写法

    <input type="button" value="按钮" id="btn" onclick="alert('hello world');">

或者是

<div id="box" onclick="alert('box');">    <input type="button" value="按钮" id="btn" onclick="alert('hello world');"></div><script>    function showMes() {        alert("hello world");    }</script>

dom0级事件处理程序

把一个函数赋值给一个事件处理程序属性

    var btn2 = document.getElementById("btn2");    btn2.onclick = function() {        alert("hello world");    }    btn2.onclick = null;    //移除事件处理程序

dom2级事件处理程序

定义了两个方法：addEventlistener()/removeEventListener()
接受三个参数，要处理的事件名，事件处理程序的函数，布尔值(false时间冒泡，true时间捕获)

    var btn3 = document.getElementById("btn3");    btn3.addEventListener('click', showMes, false);    btn3.removeEventListener('click', showMes, false);  //移除事件处理程序

dom0级和dom2级都可以给同一个元素添加多个时间处理函数，而html事件处理函数只能添加一个

tips:经过测试，ie11已经不支持attackEvent了，ie10及以下支持
ie8及其以下不支持addEventListener，其余都支持

ie事件处理程序

attachEvent()/detachEvent() 只有两个参数：事件名、处理函数

    btn3.attachEvent('onclick', showMes);    btn3.detachEvent('onclick', showMes);   //移除事件处理程序

事件对象

触发dom上的事件都会产生一个对象

1. dom中的事件对象：type、target; stopPropagaton()阻止事件冒泡,preventDefault()阻止默认行为
2. ie中的事件对象： type、srcElement cancelButtle属性阻止事件冒泡，returnValue属性阻止默认行为（为false表示阻止事件的默认行为）

附上模板：event.js

/** * Created by 94822 on 2016/4/14. */var eventUtil = {    //添加句柄    addHandler: function(element, type, handler) {        if(element.addEventListener) {            element.addEventListener(type, handler, false);        } else if(element.attachEvent) {            element.attachEvent('on'+type, handler);        } else {            element['on'+type] = handler;        }    },    //删除句柄    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;        }    },    getEvent: function(event) {        return event?event:window.event;    },    getElement: function(event) {      return event.target || event.srcElement;    },    preventDefault: function(event) {      if(event.preventDefault) {          event.preventDefault();      }  else {          event.cancelBubble = true;      }    },    stopPropagation: function(event) {        if(event.stopPropagation) {            event.stopPropagation();        } else {            event.returnValue = false;        }    }}