JavaScript事件处理程序与事件对象

2016-07-30 本文已影响59人张延伟

__ 一、事件冒泡和事件捕获__

事件冒泡
事件冒泡就是从HTML中具体的一个元素，沿着DOM树，向父级冒泡，直到document。
demo验证

<body>
    <div class="one">one
        <div class="two">two
            <div class="three">three</div>
        </div>
    </div>
    <script type="text/javascript">
        var one=document.getElementsByClassName("one")[0];
        var two=document.getElementsByClassName("two")[0];
        var three=document.getElementsByClassName("three")[0];
        var html=document.getElementsByTagName("html")[0];
        var test=false;
        one.addEventListener('click',function(){
            console.log("one");
        },test);
        two.addEventListener('click',function(){
            console.log("two");
        },test);
        three.addEventListener('click',function(){
            console.log("three");
        },test);
        document.body.addEventListener('click',function(){
            console.log("body");
        },test);
        html.addEventListener('click',function(){
            console.log("html");
        },test);
        document.addEventListener('click',function(){
            console.log("document");
        },test);
    </script>
</body>

点击three，控制台结果：
three
two
one
body
html
document
IE5.5及更早版本事件冒泡会跳过html元素，从body直接到document。

事件捕获
事件捕获是与事件冒泡相反的过程，沿着DOM树，事件最先触发最顶级的元素，依次向下到最底层的元素。
把代码中的test=true，再次点击three，控制台结果：
document
html
body
one
two
three
支持的浏览器：IE9，Safari，Chrome，OPera，FireFox
由于老版本浏览器不支持，因此很少使用事件捕获，书中也建议我们使用事件冒泡。

__ 二、事件处理程序 __
事件处理程序有三种
1、是在HTML中嵌入事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
添加事件：addEventListener(type,function,Boolean)
移除事件：removeEventListener(type,function,Boolean)
type：事件类型，function：事件执行的函数，Boolean：true事件捕获，false事件冒泡。
支持的浏览器：IE9、FireFox，Safari，Chrome，OPera
4、IE事件处理程序
添加事件：attachEvent(type,function)
移除事件：detachEvent(type,function)
IE8-只支持事件冒泡，通过此方法的事件都会添加到冒泡阶段。

三、事件对象
在触发DOM上的某个事件时，会产生一个事件对象event。

DOM事件对象：
兼容的DOM会将一个event对象传入到事件处理程序中，无论指定事件处理成程序时使用什么方法（Dom0级、DOM2级），都会传入event对象。

属性/ 方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
defaultPrevented	Boolean	只读	为true表明已经调用了preventDefault()方法
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段，1捕获阶段，2处于目标阶段，3冒泡阶段
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable为true，则可以使用
stopImmediatePropagation()	Function	只读	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法
target	Element	只读	事件的目标
trusted	Blooean	只读	为true表示事件是浏览器生成的，为false表示事件是由开发人员通过js创建的
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

IE中的事件对象
在使用DOM0级方法添加事件处理程序时，event作为window对象的一个属性event=window.event
如果事件处理程序是使用attachEvent()添加的，那么就会有一个event作为参数传入事件处理程序函数中。

属性/ 方法	类型	读/写	说明
cancelBubble	Blooean	读/写	默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同
returnvalue	Blooean	读/写	默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同
srcElement	Element	只读	事件的目标，与DOM中的target属性相同
type	String	只读	被触发的事件类型

四、跨浏览器的事件处理程序以及事件对象

/**
跨浏览器事件处理程序
*/
var EventUtil={
    //事件处理程序
    addHandler:function(element,typo,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);//Dom2级事件监听
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);//IE事件处理程序
        }else{                             
            element["on"+type]=handler;//DOM0级事件处理程序
        }
    },
    removeHandler:function(element,typo,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;
    },
    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;
        }
    },
}

由于IE9以前不支持事件捕获，因此stopPropagation()只能用来阻止事件冒泡。
简要的笔记，先记到这里，后面再继续深入学习各种事件类型，加油！！！

JavaScript事件处理程序与事件对象

猜你喜欢

热点阅读