跨浏览器事件EventUtil
<div style="width: 150px; height: 150px; padding: 25px; border:1px solid blue; " id="divBox">
<p style="width: 100px; height: 100px; padding:25px; border:1px solid red; " id="pBox">
<span style="width:50px; height:50px; border:1px solid gray; display: block;" id="spanBox">span</span>
</p>
</div>
var divBox = document.getElementById('divBox');
var pBox = document.getElementById("pBox");
var spanBox = document.getElementById("spanBox");
function handler(event){
var target = EventUtil.target(EventUtil.event(event));
switch(target.id){
case "divBox":
alert("this is divBox...");
break;
case "pBox":
alert("this is pBox");
break;
case "spanBox":
alert("this is spanBox...");
break;
}
}
EventUtil = {
addEventListener:function(ele,type,callback,capture){
if(window.addEventListener){
ele.addEventListener(type,callback,capture);
}else if(window.attachEvent){
ele.attachEvent("on"+type,callback);
}else{
ele["on"+type] = callback;
}
},
removeEventListener:function(){
if(window.removeEventListener){
ele.removeEventListener(type,callback,capture);
}else if(window.detachEvent){
ele.detachEvent("on"+type,callback);
}else{
ele["on"+type] = null;
}
},
event:function(event){
return event = event || window.event;
},
target:function(event){
var target = event.target || event.srcElement;
return target;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
}
EventUtil.addEventListener(divBox,"click",handler,false);
以上是本人自己写的,不是很全面,更全面的版本参考以下网址:
http://blog.csdn.net/guoyz_1/article/details/5521008
跨浏览器事件EventUtil的更多相关文章
- 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...
- javascript跨浏览器事件对象类库
一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- javascript IE事件处理及跨浏览器事件处理程序
一.javascript事件处理中 addEventListener/removeEventListener 用于绑定事件和解除事件,但大多用于chrome/火狐/IE9这些比较高级的浏览器中,IE8 ...
- 原生JS跨浏览器事件封装处理
引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法 一.a ...
- 【写一个自己的js库】 4.完善跨浏览器事件操作
1.阻止冒泡. function stopPropagation(event){ event = event || getEvent(event); if(event.stopPropagation) ...
- JavaScript经典实例(浏览器事件)
跨浏览器事件 1.跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(typ ...
- 跨浏览器的事件对象-------EventUtil 中的方法及用法
什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...
- EventUtil——跨浏览器的事件对象
. 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...
随机推荐
- JVM探索之内存管理(三)
上节我们介绍了JVM垃圾回收的原则,还有几个垃圾收集算法:标记-清除算法.复制算法.标记整理算法.分代收集算法:现在将要说HotSpt的垃圾收集器,这小节将只是理论. Java虚拟机规范对垃圾收集器的 ...
- 将u盘的文件复制到虚拟机上的linux系统上面—》文件挂载(文字+图解)
虚拟机中操作系统.CentOs(无图形界面) 没有图形界面的linux,我也没有配置网络,现在需要把文件复制到linux系统上面,我这里就使用了u盘挂载的方式,获得了U盘中的文件. 1.VMware中 ...
- speex进行音频去噪
应用speex进行音频去噪,speex功能很强大,因为opus的出现,用speex进行编码/解码的人几乎没有了,但是用speex来进行降噪,去除回声,增益还是很多. 这里用speex进行音频去噪,主要 ...
- openfire+asmack搭建的安卓即时通讯(七) 15.5.27
本地化之章! 往期传送门: 1.http://www.cnblogs.com/lfk-dsk/p/4398943.html 2.http://www.cnblogs.com/lfk-dsk/p/441 ...
- BZOJ1015[JSOI2008]星球大战starwar[并查集]
1015: [JSOI2008]星球大战starwar Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 5253 Solved: 2395[Submit ...
- AC日记——欧几里得的游戏 洛谷 P1290
题目描述 欧几里德的两个后代Stan和Ollie正在玩一种数字游戏,这个游戏是他们的祖先欧几里德发明的.给定两个正整数M和N,从Stan开始,从其中较大的一个数,减去较小的数的正整数倍,当然,得到的数 ...
- AC日记——阶乘和 openjudge 1.6 15
15:阶乘和 总时间限制: 1000ms 内存限制: 65536kB 描述 用高精度计算出S=1!+2!+3!+…+n!(n≤50) 其中“!”表示阶乘,例如:5!=5*4*3*2*1. 输入正整 ...
- UNITY3D的变量初始化问题
大部分是代码声明变量,而变量的初始化值在编辑器中指定,不在代码中直接指定 奇怪! 而且只有Public的才能在编辑器中出现,如果你改为Private就不再显示,如果你再改回PUBLIC,原先指定的初化 ...
- [No000061]"别人"凭什么要帮你?&理解中国人的人际和谐&外人、自己人与另一半
你出身平凡家庭:你毕业于普通大学:你没有田晓霞这样的妻子或者普京这样的丈夫:在权力.金钱乃至能力积累上,你才刚刚上路.你很年轻,你渴望成功,那么,"别人"凭什么帮你? " ...
- Hibernate 和快照
8.Oracle中的数据类型 9.Oracle中的伪列 Rowid和RowNum Rowid Rownum:在内存中形成一个不断裂的自增列 --最重要的.就是Oracle分页 我想要emp中的第二页数 ...