<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. 烂泥:vcenter5.5无AD下的安装与配置

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 公司现在的虚拟化使用的基本上都是vsphere,目前大约有7台物理机,为了更好的管理虚 ...

  2. dyld: Library not loaded: @rpath/libswiftCore.dylib 解决方法

    解决: 设置Build Setting - > 搜索 embe关键字 -> 修改属性 见如下图: 如果更新了Xcode 8 这里变成:

  3. Linux命令整理中...

    Linux命令整理中... 最常用命令(我最近最常用的一般放在前面tipsbychsry) clear 清屏 date 显示日期 cal 显示日历 cal 2014 显示2014年的日历 shutdo ...

  4. Android gdb 调试

    [1].终端目录设置到: proj.android[2].make文件的编译选项加上: -g -gstabs+[3].执行编译脚本: sh ./build_native.sh NDK_DEBUG=1[ ...

  5. centos之开放80端口

    #/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT  #/sbin/iptables -I INPUT -p tcp --dport 22 -j ...

  6. 150929-拖延高于懒-HTML(End)

    四天未更了,分别是因为Xshell和虚拟机链接不好,累,懒(好像是三天..) 就像我一直嗷嗷着要去学开出一样,5年都没有去......拖延症似乎比懒癌更可怕.慢慢的慢慢的,人长大了,小时候的一些东西才 ...

  7. [HOOLOO] zizaco/entrust 5.2.x-dev Class name must be a valid object or a string

    在使用laravel 5.1权限管理,使用  安装 zizaco/entrust 5.2.x-dev的时候执行 php artisan entrust:migration的时候报以下错误: [Symf ...

  8. ITer的七夕节,你的情人在哪里(2015-08-19)

    自写<一个程序猿的生命周期>连载以来,迎来第一个七夕节,打算写篇文章纪念一下.我主张过中国自己的节日的,也不反对过其他国家的节日,但是要搞清楚其他国家节日的由来,不要把别人的鬼节当成我们的 ...

  9. SVN服务器&客户端的搭建和使用

    目录结构: 1. SVN服务器搭建和使用-VisualSVNServer 2. SVN客户端安装和使用-TortoiseSVN 3. TortoiseSVN使用方法 SVN简介 SVN是Subvers ...

  10. [转]forever: 让nodejs应用后台执行

    在LINUX中我们可以使用这种简单的方式让node.js在后台运行: nohup node your_app.js & forever可以让我们做得更好,并且可以跨平台的在windows和Li ...