事件

事件

javaScript 与 HTML 之间的交互是通过事件实现的

1.事件流

(1)事件冒泡

IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）

(2)事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件

(3)事件代理

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

//监听ul下所有的li的事件
window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

2.事件处理程序

某个事件的函数就叫做事件处理程序

(1)HTML事件处理程序

(2)DOM0 级事件处理程序

每个元素（包括 window 和 document）都有自己的事件处理程序属性，这些属性通常全部小写，例如 onclick。

(3)DOM2 级事件处理程序

“DOM2 级事件” 定义了两个方法，用于处理指定和删除事件处理程序的操作：
addEventListener()和 removeEventListener()。

//跨浏览器的事件处理程序
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;
        }
    }
};

3.事件对象

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件
属性和方法
preventDefault() 取消事件的默认行为
stopPropagation() 取消事件冒泡

4.事件类型

(1)UI事件

load,unLoad,abord,error,select,resize,scroll

(2)焦点事件

blur //在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
focus
focusin：在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡
focusout

(3)鼠标事件

click,dbclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup

(4)键盘事件