zoukankan      html  css  js  c++  java
  • 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;
            }
        }
  • 相关阅读:
    171 01 Android 零基础入门 03 Java常用工具类02 Java包装类 01 包装类简介 01 Java包装类内容简介
    170 01 Android 零基础入门 03 Java常用工具类01 Java异常 08 Java异常总结 01 异常总结
    169 01 Android 零基础入门 03 Java常用工具类01 Java异常 07 异常链 01 异常链简介
    168 01 Android 零基础入门 03 Java常用工具类01 Java异常 06 自定义异常 01 自定义异常类
    167 01 Android 零基础入门 03 Java常用工具类01 Java异常 05 使用throw和throws实现异常处理 02 使用throw抛出异常对象
    166 01 Android 零基础入门 03 Java常用工具类01 Java异常 05 使用throw和throws实现异常处理 01 使用throws声明异常类型
    165 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 05 return关键字在异常处理中的使用
    DevExpress WPF v20.2版本亮点放送:全新升级的PDF Viewer
    界面控件DevExpress使用教程:Dashboard – 自定义导出
    DevExpress WinForms帮助文档:表单控件
  • 原文地址:https://www.cnblogs.com/yuaima/p/5080255.html
Copyright © 2011-2022 走看看