JavaScript DOM事件总结

---

什么是事件

事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML是交互是通过事件来实现的。

事件流

事件流描述的是从页面接受事件的顺序。

1、事件冒泡

事件开始时由最具体的元素接收，然后逐渐向上传播到较为不具体的节点（文档）

2、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意是到达预定目标之前捕获它。

3、DOM事件流

“DOM2级事件”规定的时间流包括三个阶段： 事件捕获阶段、处于目标的阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段。

事件处理程序

1、HTML事件处理程序

<input type="button" value = "点击" onclick = "alert('阿清呀')" />
<input type="button" value = "点击" onclick = function() />

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

缺点：

1. 存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
2. 另一个缺点是，这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同 Javascript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。

2、DOM0 级事件处理程序

JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
优点：简单、具有跨浏览器的优势。
缺点：无法为一个元素绑定多个事件。

            var btn = document.getElementById("Btn");
            btn.onclick = function() {
     
                alert(this.id); //"Btn"
            };

在事件处理程序中可以通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。this指的绑定事件的元素。

btn.onclick = null;

将相应的属性设置为null，也可以删除以这种方式制定的事件处理程序。

3、DOM2 级事件处理程序

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

1. 事件的字符串，不要on
2. 回调函数，当事件触发时该函数会被调用
3. 这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序，一般都传false。

使用DOM2 级事件的好处是可以添加多个事件处理程序，事件的处理顺序是按照添它们的顺序触发的。

            var btn = document.getElementById("btn");
            btn.addEventListener("click", function() {
     
                alert(this);   //[object HTMLButtonElement]
            }, false);

DOM2 级事件处理程序中的 this 是指向它绑定的元素。

通过addEventListener() 添加的事件处理程序只能使用 removeEventListener() 来移除，移除时传入的参数与添加处理程序时使用的参数相同，这也意味着通过addEventListener() 添加的匿名函数将无法移除。如下：

            var btn = document.getElementById("myBtn");
            btn.addEventListener("click", function() {
     
                alert(this.id);
            }, false);
            // 这里省略了??代码
            btn.removeEventListener("click", function() {
      // 没有用！
                alert(this.id);
            }, false);

            var btn = document.getElementById("myBtn");
            var handler = function() {
     
                alert(this.id);
            };
            btn.addEventListener("click", handler, false);
            // 这里省略了??代码
            btn.removeEventListener("click", handler, false); // 有效！

4、IE事件处理程序

在IE8中实现了与DOM中类似的两个方法： attachEvent()和 detachEvent()。来绑定事件

参数：

1. 事件的字符串，要on。
2. 回调函数。

这个方法也可以同时为一个事件绑定多个处理函数。不同的是它是后绑定的先执行，执行顺序和addEventListener()相反。

在IE中使用attachEvent() 与其他两个事件处理程序的主要区别就是作用域，在DOM 0 级和DOM 2 级的情况下，事件处理程序会在所谓的元素作用域中运行。在使用attachEvent() 方法的情况下事件处理程序会在全局作用域中运行。因此this等于window，这在编写跨浏览器作用域中非常重要。

            var btn = document.getElementById("Btn");
            btn.attachEvent("onclick", function() {
     
                alert(this === window); //true
            });

使用attachEvent ()添加的事件可以通过detachEvent ()来移除，条件是必须提供相同的参数。与DOM方法一样，这也意味着添加的匿名函数将不能被移除。不过，只要能够将对相同函数的引用传
给detachEvent(),就可以移除相应的事件处理程序。

5、跨浏览器事件处理程序

对其进行封装。

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;
                }
            },

            // 解决浏览器兼容性问题
            getEvent: function(event) {
     
                return event ? event : window.event;
            },

            // 返回事件目标
            getTarget: function(event) {
     
                return event.target || event.srcElement;
            },

            //取消事件的默认行为。
            preventDefault: function(event) {
     
                if (event.preventDefault) {
     
                    event.preventDefault();
                } else {
     
                    event.returnValue = false;
                }
            },

            // 移除事件处理程序
            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;
                }
            },

            //提供相关元素的信息，relatedTarget这个属性只对与mouseover和mouseout事件才包含值。
            getRelatedTarget: function(event) {
     
                if (event.relatedTarget) {
     
                    return event.relatedTarget;
                } else if (event.toElement) {
     
                    return event.toElement;
                } else if (event.fromElement) {
     
                    return event.fromElement;
                } else {
     
                    return null;
                }
            },

            //获取鼠标按钮
            /**
             *  0: 表示没有按下按钮。
                1: 表示按下了主鼠标按钮。
                2: 表示按下了次鼠标按钮。
                3: 表示同时按下了主、次鼠标按钮
                4: 表示按下了中间的鼠标按钮。
                5: 表示同时按下了主鼠标按钮和中间的鼠标按钮。
                6: 表示同时按下了次鼠标按钮和中间的鼠标按钮。
                7: 表示同时按下了三个鼠标按钮。*/
            getButton: function(event) {
     
                if (document.implementation.hasFeature("MouseEvents", "2.0")) {
     
                    return event.button;
                } else {
     
                    switch (event.button) {
     
                        case 0:
                        case 1:
                        case 3:
                        case 5:
                        case 7:
                            return 0;
                        case 2:
                        case 6:
                            return 2;
                        case 4:
                            return 1;
                    }
                }
            },

            //获得鼠标滚轮的增量值delta
            getWheelDelta: function(event) {
     
                if (event.wheelDelta) {
     
                    return (client.engine.opera && client.engine.opera < 9.5 ?
                        -event.wheelDelta : event.wheelDelta);
                } else {
     
                    return -event.detail * 40;
                }
            },


            //获取字符串编码  主要用于文本框 监听事件是keypress
            getCharCode: function(event) {
     
                if (typeof event.charCode == "number") {
     
                    return event.charCode;
                } else {
     
                    return event.keyCode;
                }
            },

            //取消进一步的事件捕获或者冒泡
            stopPropagation: function(event) {
     
                if (event.stopPropagation) {
     
                    event.stopPropagation();
                } else {
     
                    event.cancelBubble = true;
                }
            }
        };

事件对象

在触发DOM上的某个事件时，会产生一个事件对象 event ，这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型，以及其他事件相关的信息。

1、DOM中的事件对象

兼容DOM的浏览器会将一个event 对象传入到事件处理事件程序中。

           var btn = document.getElementById("myBtn");
            btn.onclick = function(event) {
     
                alert(event.type); //"click"
            };
            btn.addEventListener("click", function(event) {
     
                alert(event.type); //"click"
            }, false);

event.type 属性表示的事件类型，始终包含着被触发的事件。

event包含于创建它的特定事件有关的属性和方法，触发的事件类型不一样，可用的属性和方法也不一样。不过所有事件都会有下列成员：

在事件处理程序的内部，对象 this 始终等于 currentTarget 的值，而 target 则包含事件的事件的实际目标。两种情况：

1、如果直接将事件处理程序给定目标元素，则this 、currentTarget、target 三个值相等。

            var btn = document.getElementById("myBtn");
            btn.onclick = function (event) {
     
                alert(event.currentTarget === this); //true
                alert(event.target === this); //true
            }; 

2、如果将事件处理程序给定目标元素的父节点或者祖先节点那么target 的值就不和this 、currentTarget 的值相等。（事件的委派中要注意）

            document.body.onclick = function(event) {
     
                alert(event.currentTarget === document.body); //true
                alert(this === document.body); //true
                alert(event.target === document.getElementById("myBtn")); //true
            };

preventDefault() 方法，可以阻止特定事件的默认行为。如链接的默认行为是点击时会跳转到指定的URl。如果阻止它的的默认行为，就会点击时没有反应。cancelable 属性设置为 true的事件，才可以用 proventDefault() 来取消其默认行为。

            var link = document.getElementById("myLink");
            link.onclick = function(event) {
     
                event.preventDefault();
            };

stopPropagation() 方法 用于立即停止事件在DOM中的传播，取消事件的进一步捕获或者冒泡。例如 在一个按钮的事件处理程序中调用 stopPropagation()，这样冒泡就不会在document.body上响应处理事件。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
     
alert("Clicked");
event.stopPropagation();
};
document.body.onclick = function(event){
     
alert("Body clicked");     //不会触发该事件
};

eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段。

• event.eventPhase 等于 1 ：在捕获阶段调用处理事件。
• event.eventPhase 等于 2 ：事件处理程序在目标对象上。
• event.eventPhase 等于 3 ：在冒泡阶段调用处理程序。

尽管“处于目标”发生在冒泡阶段，但 event.eventPhase 是等于 2 的。
当 event.eventPhase 等于 2 的时候，this 、currentTarget、target 三个值相等。

            var btn = document.getElementById("myBtn");
            btn.onclick = function(event) {
     
                alert(event.eventPhase); //2
            };
            document.body.addEventListener("click", function(event) {
     
                alert(event.eventPhase); //1
            }, true);
            document.body.onclick = function(event) {
     
                alert(event.eventPhase); //3
            };

只有在事件处理程序执行期间，event对象才会存在;一旦事件处理程序执行完成，event对象就会被销毁。

2、IE中的事件对象

要访问 IE 中的 event 对象有几种方式，取决于指定事件处理的方法。

1. 如果使用DOM 0 级方法添加事件处理程序时event对象作为window对象的一个属性存在。

            var btn = document.getElementById("myBtn");
            btn.onclick = function () {
     
                var event = window.event;
                alert(event.type); //"click"
            };

2. 如果使用attachEvent() 添加的事件，一个名叫 event 对象作为参数被传入事件函数中。

            var btn = document.getElementById("myBtn");
            btn.attachEvent("onclick", function (event) {
     
                alert(event.type); //"click"
            });

3. 如果通过HTML特性指定的事件处理程序，可以通过一个名叫 event 的变量来访问 event 对象。和第二种相同。

<input type="button" value="Click Me" onclick="alert(event.type)">

IE的 event 对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的
或者相关的DOM属性和方法。与DOM的event对象一样，这些属性和方法也会因为事件类型的不同
而不同，但所有事件对象都会包含下表所列的属性和方法。

event.srcElement 事件的目标。因为事件处理的作用域是根据指定它的方式来确定的，所以不能认为 this 会始终等于事件的目标，使用event.srcEvent 比较好。（跨浏览器时候要注意）

            var btn = document.getElementById("myBtn");
            btn.onclick = function() {
     
                alert(window.event.srcElement === this); //true
            };
            btn.attachEvent("onclick", function(event) {
     
                alert(event.srcElement === this); //false
            });

returnValue 属性相当于DOM中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false,就可以阻止默认行为。

            var link = document.getElementById("myLink");
            link.onclick = function() {
     
                window.event.returnValue = false;
            };

cancelBubble 属性与DOM中的stopPropagation()方法作用相同，都是用来停止事件冒泡的。由于IE不支持事件捕获，所以只能取消事件冒泡;但stopPropagatioin ()可以同时取消事件捕获和冒泡。

            var btn = document.getElementById("myBtn");
            btn.onclick = function() {
     
                alert("Clicked");
                window.event.cancelBubble = true;
            };
            document.body.onclick = function() {
     
                alert("Body clicked");         // 无法响应事件
            };

事件类型

• UI ( User Interface,用户界面)事件，当用户与页面上的元素交互时触发;
• 焦点事件，当元素获得或失去焦点时触发;
• 鼠标事件，当用户通过鼠标在页面上执行操作时触发;
• 滚轮事件，当使用鼠标滚轮(或类似设备)时触发;
• 文本事件，当在文档中输人文本时触发;
• 键盘事件，当用户通过键盘在页面上执行操作时触发;
• 合成事件，当为IME ( Input Method Editor,输入法编辑器)输入字符时触发;
• 变动( mutation)事件，当底层DOM结构发生变化时触发。

1、UI事件

UI事件指的是那些不一定与用户操作有关的事件。

• load:当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载载完毕时在元素上面触发，或者当嵌人的内容加载完毕时在元素上面触发。
• unload:当页面完全卸载后在window.上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌人的内容卸载完毕后在