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;
}
}
最新文章
- 用手机自带uc浏览器查看静态页面，css样式不显示
- XML操作类
- EasyUI中控件汉化问题
- flex弹性布局
- oVirt-engine项目UI结构
- html之大白
- SpringMVC视图解析器(转)
- Thread的第五天学习
- ACM2039_三角形三边关系
- iOS Regex匹配关键字并修改颜色
- SqlServer主键和自增长设置
- 3、Linux连接oracle
- JSON库的使用研究（一）
- flex属性
- linux环境下遇到的所有问题
- 【Scala学习之一】 Scala基础语法
- 可变，不可变与 id 的关系
- 简单的php自定义错误日志
- try与catch
- Mac下新安装的MySQL无法登陆root用户解决方法