<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. 使用Apache2配置多个站点

      六 27 pache2主配置文件: /etc/apache2/apache2.conf.其最后两行为: # Include the virtual host configurations:Incl ...

  2. [To be translated] Nova:libvirt image 的生命周期

    翻译自:http://www.pixelbeat.org/docs/openstack_libvirt_images/ The main stages of a Virtual Machine dis ...

  3. Bubble Sort [ASM-MIPS]

    # Program: Bubble sort # Language: MIPS Assembly (32-bit) # Arguments: 5 unordered numbers stored in ...

  4. cuda中thread id

    //////////////////////////////////////////////////////////////////////////// // // Copyright 1993-20 ...

  5. Unity 5 WebGL vs Web Player

    起原 Unity5.3中看到Web Player未来将到被取消,根据Unity官方blog中称Unity5.4中将会移除web player. 本文从我知道的知识比较一下webPlayer和WebGL ...

  6. 嵌入式linux根文件系统制作

    编译Busybox 从http://www.busybox.net/downloads/下载busybox工具.这里我们下载的上最新版: busybox-1.24.2.tar.bz2 解压Busybo ...

  7. 转:软件架构入门 (from 阮一峰)

    说明:其中讲到了 5 种的架构模型,很不错. from: http://www.ruanyifeng.com/blog/2016/09/software-architecture.html

  8. tyvj[1087]sumsets

    描述     正整数N可以被表示成若干2的幂次之和.例如,N = 7时,共有下列6种不同的方案:1) 1+1+1+1+1+1+12) 1+1+1+1+1+23) 1+1+1+2+24) 1+1+1+4 ...

  9. C#几个经常用到的字符串截取

    C#几个经常用到的字符串截取 一. 1.取字符串的前i个字符 (1)string str1=str.Substring(0,i); (2)string str1=str.Remove(i,str.Le ...

  10. PHP核心技术与最佳实践--笔记

    <?php error_reporting(E_ALL); /* php 5.3引入 延迟静态绑定 */ /* php5.4引入trait,用来实现多层继承 trait Hello{} trai ...