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