js-JavaScript高级程序设计学习笔记8

第十三章 事件

1、DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

2、大部分浏览器都会在捕获阶段出发对象上的事件，结果就是，有两个机会在目标对象上面操作事件。

3、事件是用户或浏览器自身执行的某种动作，比如click、load、mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以on开头，如onclick。

4、HTML事件处理程序不推荐使用，HTML和JS代码紧密耦合，不方便维护。

5、DOM0级事件处理程序——通过JS指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。如btn.onclick=function(){//代码};可被认为是元素的方法，是在元素的作用域中运行，程序中this引用当前元素。

6、DOM2级事件处理程序定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。接收三个参数，要处理的事件名（click，没有on，因为是事件名称）、作为事件处理程序的函数和一个布尔值。布尔值为true时表示在捕获阶段调用，false表示在冒泡阶段调用。DOM2级方法添加事件的主要好处时可以添加多个事件处理程序，会按照添加顺序触发。通过addEventListener（）添加的事件处理程序只能通过removeEventListener（）来移除，匿名函数无法移除。

7、IE事件处理程序，两个方法：attachEvent（）和detachEvent（）。接收两个参数：事件处理程序名称（onclick，有on，因为是事件处理程序名称）和事件处理程序函数。这个方法作用域是全局作用域，this等于window。可以添加多个事件，但是执行顺序与添加顺序相反！

8、DOM0级对每个事件只支持一个事件处理程序。强行对一个元素绑定两个相同事件，只会执行最后一个事件。在这里相当于给一个元素设置了一个属性，这个属性只能有一个值，比如onmouseover属性，它的值是某个函数的引用，再次绑定mouseover事件后，这个值将会被覆盖。

9、跨浏览器的事件对象的信息和方法——EventUtil对象。

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;
        }
    },
    //获取event对象
    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;
        }
    },
    //阻止事件流
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    }
}

10、采用图像预先加载时，若要在图像加载完指定事件处理程序，则需要先绑定事件，再设置src属性。新图像在设置了src后立即开始下载。所以事件要放在设置src语句前，防止图片加载过快（缓存），事件若在src语句后，则不会触发onload。

11、<script>和<link>加载js和样式表的时候，事件和指定src（href）的语句前后无所谓，因为指定src并需要把元素添加到文档后才会开始下载。