美文网首页
JavaScript事件处理程序与事件对象

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

作者: 张延伟 | 来源:发表于2016-07-30 19:07 被阅读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事件处理程序与事件对象

          本文链接:https://www.haomeiwen.com/subject/inltsttx.html