JS事件（二）事件对象
2024-04-02 00:06:15
html事件处理程序中，变量event中保存着事件对象
<button onclick="alert(ev.type)" id="btn">click</button>
1、DOM中的事件对象
无论是DOM0还是DOM2，事件处理程序中都会传入一个event对象
var btn=document.getElementById("btn");
btn.onclick=function(){
alert(1);
}
btn.addEventListener("click",function(ev){
alert(ev.type);
},false);
所有的事件都会有下表列出的成员：
在事件处理程序内部，对象this始终等于currentTarget的值，而target是事件实际目标
stopPropagation用于立即停止事件在DOM层中的传播：
var btn=document.getElementById("btn");
btn.onclick=function(event){
alert("btn");
event.stopPropagation();
}
document.body.onclick=function(event){
alert("body");//不会执行
}
2、IE中的事件对象
访问IE中的event对象的方式取决于指定事件处理程序的方法
2.1、DOM0级：
IE8-浏览器不识别传入的event对象，需要在事件处理函数内部声明
var btn=document.getElementById("btn");
btn.onclick=function(event){
alert(window.event.type);
}
IE9+浏览器以及其他高级浏览器则是两种方式都支持
2.2、attachEvent：
支持传入event参数
所有的事件都会有下表列出的成员：
this不一定指向目标元素，也可能指向全局（attachEvent），故用event.srcElement比较保险
兼容浏览器的事件处理对象：
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}
else{
element['on'+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type]=null;
}
},
getEvent:function(event){
return event ? event : window.event;
},
getTarget: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;
}
}
}
最新文章
- Underscore.js
- CSS命名
- 使用代理(WebProxy）爬虫
- 【BZOJ】1103: [POI2007]大都市meg
- ZooKeeper(3.4.5) - 原生 API 的简单示例
- Sublime text 3 快键方式汇总 及 主题应用
- Java日志性能
- [转] SQL Server游标的使用
- kernal linear regression
- django学习之Model（五）MakingQuery
- 基于visual Studio2013解决C语言竞赛题之1094纵横图
- Linux下链接数据库图形化工具
- [python3.5][PyUserInput]模拟鼠标和键盘模拟
- JAVA方法参数传递
- HTTP 协议支持的十种方法
- Agile敏捷开发Planning Poker简介
- screen 实战后台命令执行备份
- java保留两位小数和js保留两位小数一致性研究
- Verilog 加法器和减法器(5)
- 单例模式在生产环境jedis集群中的应用