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;
        }
    }