跨浏览器事件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 ...
随机推荐
- 烂泥:更换ESXI5.0管理网卡及管理IP地址
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 公司的服务器基本上都是在IDC机房里面的,为了更有效的利用服务器性能.所以有几台服务器,安装的是ESXI5.0做成虚拟化. 注意目前这些服务器都是双网卡 ...
- Linux服务器开机没响应,BIOS信息都没有
于2015-10-16,记得是4月份装的服务器,上边ineedle都部署完毕,当时没有派上用场,这次华为测试需要一台ineedle测试机,便把这个安装好的ineedle请出来了,插上电源后,接上网线, ...
- 非常不错的点餐系统应用ios源码完整版
该源码是一款非常不错的点餐系统应用,应用源码齐全,运行起来非常不错,基本实现了点餐的一些常用的功能,而且界面设计地也很不错,是一个不错的ios应用学习的例子,喜欢的朋友可以下载学习看看,更多ios源码 ...
- 使用Tcmalloc进行堆栈分析
在前一篇译文<使用TCmalloc的堆栈检查>,介绍了Tcmalloc进行堆栈检查,今天翻译<heap-profiling using tcmalloc>,了解如何 TCmal ...
- 浅谈输入输出”重定向“——基于Linux系统
前言 进程在启动后会自动的打开3个文件:标准输入.标准输出和标准错误输出分别对应文件描述符0.1.2.对于每个进程他们都都维护了一张文件描述符表(file descriptor table),通常fd ...
- 报表引擎API开发入门— EJB程序数据源
我们前面讲了几个数据源,今天我们来讲一下EJB数据源,这篇讲完我们数据源这部分就讲完了.数据连接不需要直接访问数据库,而是使用EJB做为数据源.FR通过定义程序数据集使用EJB的相关类获取到EJB数据 ...
- 【HTML5】标记文字
1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> ...
- stanford coursera 机器学习编程作业 exercise 3(逻辑回归实现多分类问题)
本作业使用逻辑回归(logistic regression)和神经网络(neural networks)识别手写的阿拉伯数字(0-9) 关于逻辑回归的一个编程练习,可参考:http://www.cnb ...
- jsp前三章测试
(选择一项) A: B: C: D: 正确答案是 B ,B/S架构并不是C/S架构的替代品,有些程序例如大型的网络游戏一般使用的是C/S架构. (选择多项) A: B: C: D: 正确答案是 A,C ...
- hibernate之关联映射
No.1 映射一对多双向关联关系: 当类与类之间建立了关联,就可以方便的从一个对象导航到另一个或另一组与它关联的对象. 步骤一: 注意:hibernate要求在持久化类中定义集合类属性时,必须把属性类 ...