<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. Makefile关键字

    @ makefile会把将要执行的命令行在命令执行前输出到屏幕上,使用@可以避免显示出命令本身 若@ echo 正在编译-则$make显示正在编译- 若echo 正在编译-则$make显示: echo ...

  2. oracle--trunc与to_char的区别

    trunc取得是天(可比较),而to_char取得是数值(可计算): 但trunc(date) 具有与to_char(date) 相似的功能,但有区别:   trunc(sysdate,'cc')  ...

  3. 优化SQL查询:如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  4. linux挂载windows上的共享文件夹

    假定win机d:/folder/share的共享名为 share , 有用户administrator ,密码123 在linux机上,把share挂到/mnt目录:mount -t cifs -o ...

  5. 理解 OpenStack + Ceph (7): Ceph 的基本操作和常见故障排除方法

    本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...

  6. Java实现点击一个控件实现删除一个控件的方法

    最近在做项目的时候需要处理点击一个JLabel实现删除这一个JLabel的功能.最近折磨了一点时间,查了一下API.找到2个方法可以实现这个功能. remove public void remove( ...

  7. 【2016-10-14】【坚持学习】【Day5】【单例模式】

    今天学习第二个模式:单例模式.只允许系统有一个实例运行,提供全局访问该实例的公共方法. class Singleton { private static Singleton instance=null ...

  8. Stanford机器学习笔记-8. 支持向量机(SVMs)概述

    8. Support Vector Machines(SVMs) Content 8. Support Vector Machines(SVMs) 8.1 Optimization Objection ...

  9. Stanford机器学习笔记-4. 神经网络Neural Networks (part one)

    4. Neural Networks (part one) Content: 4. Neural Networks (part one) 4.1 Non-linear Classification. ...

  10. C#小游戏(文字对战游戏)

    第一代,不是很完善,会在后续增加更多的功能 主: using System; using System.Collections.Generic; using System.Linq; using Sy ...