JS-13章-事件

196 阅读2分钟
  • 1.事件流

概念:从页面中接收事件的顺序

过程:'DOM2级事件'规定的事件流包括三个阶段:事件捕获阶段、处于目标事件、事件冒泡阶段;'DOM2级事件'
     规定捕获阶段不会涉及事件目标,但是在IE9、safari、chrome、firefox、opera 9.5等更高版本都会在
     捕获阶段触发事件对象上的事件。

  • 2.事件处理程序

概念:响应某个事件的函数就叫事件处理程序(或事件侦听器);事件处理程序的名字以'on'开头;

事件添加处理程序的方式:
    1.在 HTML 中指定事件处理程序
        该方式有三个缺点:1:首先、存在一个时差问题;使用try(函数名())catch(ex){}
                        2:其次:这样扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果
                        3.最后:HTML与javascript代码紧密耦合
    2.DOM0级事件处理程序
        概念:就是将一个函数赋值给一个事件处理程序属性;
        兼容性:所有现代浏览器都支持;原因:一是简单、二是具有跨浏览器优势;
        处理阶段:事件流的冒泡阶段被处理、this表示引用的当前元素;
        清除:将事件处理程序设置为null;
    3.DOM2级事件处理程序
        方法:addEventListenter(事件名,事件处理程序函数,布尔值-是否要在捕获阶段调用事件处理程序)
              removeEventListenter(要求参数相同);
        兼容性:IE9、chrome、firefox、safari、opera
        注意:可以添加多个事件处理程序、按由上到下的顺序执行;this表示引用的当前元素
    4.IE事件处理程序
        方法:attachEvent(事件处理程序名-on + 事件名,事件处理程序函数)、detachEvent(参数相同);
        兼容性:IE和opera
        处理阶段:冒泡阶段
        注意:可以添加多个事件处理程序、按由下到上的顺序执行;this表示window
    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;
                    }
                },
                removeHandler:function(element, type, handler){
                    if(element.removeEventListener){
                        element.removeEventListener(type, handler, false);
                    }else if(element.datachEvent){
                        element.datachEvent('on' + type, handler);
                    }else{
                        element['on' + type] = null;
                    }          
                }
            }
        注意:addHandler()和removeHandler没有考虑到所有浏览器的兼容问题,例如IE中的作用域问题