跨浏览器事件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 ...
随机推荐
- android-xxxx must implement the inherited abstract method报错
public class ContactMainFragment extends Fragment implements OnClickListener { 提示:ContactMainFragmen ...
- Linux aclocal
一.简介 二.安装 三.常用指令 1)安装m4 aclocal -I m4 2)查看aclocal的路径 aclocal --print-ac-dir 四.常见问题 1) LIBTOOL is und ...
- 提升效率(时间准确性),减少时间和资源的消耗——由89C52/89C51的定时器中断引出的一些问题
尽量用最少的文字描述清楚问题. 事情起因是这样的: 要做遥控小车的平台迁移,STM32开发板无法方便地供电,因此又拿出了尘封的51(STC89C52RC),搭配上最小系统板就可以用排针加杜邦线供电了. ...
- eclipse PermGen space解决方案
转自网上 这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被放到PermGen space中,它和存放类实例(Instance)的Heap区域不同,GC(Garb ...
- 洛谷⑨月月赛Round2 P3393逃离僵尸岛[最短路]
题目描述 小a住的国家被僵尸侵略了!小a打算逃离到该国唯一的国际空港逃出这个国家. 该国有N个城市,城市之间有道路相连.一共有M条双向道路.保证没有自环和重边. K个城市已经被僵尸控制了,如果贸然闯入 ...
- NOIP2015跳石头[二分答案]
题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选 择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块岩石( ...
- Unity 5 WebGL vs Web Player
起原 Unity5.3中看到Web Player未来将到被取消,根据Unity官方blog中称Unity5.4中将会移除web player. 本文从我知道的知识比较一下webPlayer和WebGL ...
- 已Access为支持,书写一个C#写入的记录的方案
/// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称 ...
- poj 2892
Tunnel Warfare Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 7725 Accepted: 3188 D ...
- Linode Centos6.5从零开始装环境...流水账
安装JDK 下载. 先通过oracle网站, 下载, 得到link后, 在linode命令行里wget, 速度飞快, 但是文件名要改下. 其中JDK6是.bin, 其他都是tar.gz, bin直接执 ...