• js事件3-事件对象


    对于每次点击一个事件,都会产生一个事件对象,这个事件对象中包含了这个事件的很多信息

    我们来看看事件对象具体有哪些信息

    Object.onclick=function(e){

    .....

    }其中的参数e就是事件对象,我们可以将事件对象当做参数传入到函数中去

    事件对象具有几种属性,几种方法(这里面也存在事件兼容的问题奥)

    对于火狐,chrome浏览器来说

    我们先简要介绍几个属性

    比如type属性

    Object.onclick=function(e){

     alert(e.type);//结果是click表示的是点击事件

    alert(e.target);//返回的是你这个事件加载在哪个目标上,就返回哪个目标,指的是事件的被加载的目标。

    }

    它还具有两个比较重要的方法

    阻止事件冒泡:stopPropagation();

    阻止事件默认属性:preventDefault();

    通过下面的例子来说说明一下这两个函数的意思

    index.html

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="shijian.js"></script>
    </head>
    <body>
    <div id="div1">
        <input type="button" id="btn1" value="点击1"/>
        <input type="button" id="btn2" value="点击2"/>
        <input type="button" id="btn3" value="点击3"/>
        <a href="http://www.imooc.com"  id="go">aaaa</a>
    
    </div>
    </body>
    </html>

    shijian.js

    window.onload=function(){
        var go=document.getElementById("go");
        var div1=document.getElementById("div1");
        go.onclick=function(e){
    alert("点击了链接事件");
    document.write("事件类型:"+e.type+"事件目标:"+e.target);
    e.stopPropagation();
    e.preventDefault();
    }
    div1.onclick=function(e){
     alert("事件冒泡到这里");
    document.write("事件类型:"+e.type+"事件目标:"+e.target);

    }

    如果我们点击了链接,就会触发点击事件,然后会弹出对话框"你点击了链接事件" document中会输出"事件类型:click 事件目标:document.element.a之类的

    然后事件会冒泡到div上,但是我们设置了阻止事件冒泡,所以此点击事件就不会冒泡到div上。然后由于我们点击的是链接,按照常理页面会跳转到链接中的href中的地址位置,但是我们设置了阻止默认事件,也就是,链接的默认事件是你点击它,它就跳转到相应的位置,但是由于我们设置了阻止默认事件,所以他就不跳转了。

     还有其他的一些属性和方法,我就不具体说明了。

    有的同学发现上面的有些在IE中没有作用?这是为什么呢?,因为我们这里是DOM事件,所以在IE中是不兼容的,好的。那我们来看看IE中是如果操作的

    2.IE 中的事件对象

    获取事件类型的方式也是e.type;

    获取事件对象:e.srcElement

    注意IE中的阻止冒泡和阻止默认事件也都是属性,不是函数

    阻止冒泡:e.cancelBubble=true;

    阻止默认事件:e.returnValue=false;false表示阻止默认事件是启动的。true表示没有启动阻止默认事件。

    还有一点,就是我们获取对象也是存在浏览器兼容的问题。那么我们只要兼容一下就可以了

    Object.onclick=function(e){

      e=e||window.event;//这句话就解决了浏览器兼容的问题。

    }

    3.最后我们把这些属性,方法也封装到一个对象中:

    var jianrong={
        addEvent:function(objectname,eventname,func){
            if(objectname.addEventListener){
                objectname.addEventListener(eventname,func,false);
            }else if(objectname.attachEvent){
                objectname.attachEvent("on"+eventname,func);
            }else{
                objectname["on"+eventname]=func;
            }
        },
        removeEvent:function(objectname,eventname,func){
            if(objectname.addEventListener){
                objectname.removeEventListener(eventname,func,false);
            }else if(objectname.attachEvent){
                objectname.detachEvent("on"+eventname,func);
            }else{
                objectname["on"+eventname]=null;
            }
        },
        getEvent:function(event){
            return event?event:window.event;
        },
        getType:function(event){
            return event.type;
        },
        getElement: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;
            }
        }
  • 相关阅读:
    『Python』进程同步
    『Python』多进程
    『GoLang』协程与通道
    『GoLang』错误处理
    『码农翻身』语言的学习
    『GoLang』fmt包的使用
    异或运算符(^)、与运算符(&)、或运算符(|)、反运算符(~)、右移运算符(>>)、无符号右移运算符(>>>)
    HTML DOM focus() 方法
    JavaScript中的indexOf使用方法
    HTML 5 中的textarea标签
  • 原文地址:https://www.cnblogs.com/yuaima/p/5080255.html
Copyright © 2020-2023  润新知