<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的更多相关文章

  1. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...

  2. javascript跨浏览器事件对象类库

    一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...

  3. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  4. javascript IE事件处理及跨浏览器事件处理程序

    一.javascript事件处理中 addEventListener/removeEventListener 用于绑定事件和解除事件,但大多用于chrome/火狐/IE9这些比较高级的浏览器中,IE8 ...

  5. 原生JS跨浏览器事件封装处理

    引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法 一.a ...

  6. 【写一个自己的js库】 4.完善跨浏览器事件操作

    1.阻止冒泡. function stopPropagation(event){ event = event || getEvent(event); if(event.stopPropagation) ...

  7. JavaScript经典实例(浏览器事件)

    跨浏览器事件 1.跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(typ ...

  8. 跨浏览器的事件对象-------EventUtil 中的方法及用法

    什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...

  9. EventUtil——跨浏览器的事件对象

    . 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...

随机推荐

  1. ps, top, pstree

    ps 查看当前终端所启动的进程, 不加选项只查看当前终端的进程 PID TTY TIME CMD 2398 pts/1 00:00:00 bash 3625 pts/1 00:00:00 ps #PI ...

  2. cookie工具类,解决servlet3.0以前不能添加httpOnly属性的问题

    最近在解决XSS注入的问题,由于使用的servlet版本是2.5,不支持httpOnly的属性,故做了个工具类来实现cookie的httpOnly的功能.全类如下: /** * cookie工具类,解 ...

  3. VS2010最常用快捷键

    1.选择类 F8 当前位置变成选定区域的头/尾(再移动光标或者点鼠标就会选定) Ctrl + F8 当前行变成选定区域的头/尾(再移动上下光标或者点鼠标就会选定多行) CTRL + W 选择当前单词 ...

  4. [麦先生]初学Laravel框架与ThinkPHP框架的不同(2)

    在经过了一段时间的开发后,我对Laravel框架的认识又在逐步的加深,对于这个世界占有量NO.1的框架...  我想说,我已经在逐步的感受到他的恐怖之处... 一.建表--Laravel在数据库建表上 ...

  5. (三)策略模式-C++实现

    策略模式:定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换,本模式使得算法可独立于使用它的客户而变化. 三种角色: 1.策略:一个抽象类,这个接口定义了若干个算法标识,即多个虚函数,这些个 ...

  6. KSFramework配置表:扩展表格解析类型

    解析和扩展表格 配置表示例 配置表模块在编译时,把Excel转化成TSV,并根据Excel的头部信息,生成对应的代码: 比如源码库中的Test.xlsx Excel文件,两个列头,Id和Value,其 ...

  7. [No000058]一口气读完一本英语书

    个人:"如何学好英语?"99个人会回答:"去,读英文原著." 然而这事儿吧,恐怕比坚持背单词还难.无论少侠们背过多少单词,最后都会败在生词太多.句子太难的坎儿上 ...

  8. [No000037]操作系统Operating Systems操作系统历史与硬件概况History of OS & Summaries!

    培根:读史使人明智 操作系统的简史 (1955-1965) 计算机非常昂贵,上古神机IBM7094 ,造价在250万美元以上 计算机使用原则:只专注于计算 批处理操作系统(Batch system) ...

  9. NOI 2002 营业额统计 (splay or fhq treap)

    Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...

  10. WARN util.NativeCodeLoader: Unable to load native-hadooplibrary for your platform… using builtin-java classes where applicable

    方法1glibc 官方要求的2.14版本以上 方法2:http://www.secdoctor.com/html/yyjs/31101.html 方法3: http://dl.bintray.com/ ...