<div id="myDiv" style="width:100px; height:100px; border:1px solid #f00;"></div>
<script>
/**
* 跨浏览器事件处理
**/
var EventUtil = {
//添加事件
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on" + type] = handler;
}
},
//获取事件对象
getEvent:function(event){
return event ? event : window.event;
},
//获取元素对象
getTarget:function(event){
return event.target || event.srcElement;
},
//删除默认事件
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
//删除事件
removeHandler:function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on" + type, handler);
}else{
element["on" + type] = null;s
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
//获取相关元素(mouseove和mouserout事件可能用的到)
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
};
/**
* 使用方法实例
**/
var myDiv = document.getElementById("myDiv");
//添加事件
EventUtil.addHandler(myDiv, 'click',addEventFun);
//删除事件
//EventUtil.removeHandler(myDiv, 'click', addEventFun);
function addEventFun(event){
//获取事件对象event
var eventName = EventUtil.getEvent(event);
console.log(eventName);
//获取元素对象
var elementTarget = EventUtil.getTarget(event);
console.log(elementTarget);
//删除默认事件
EventUtil.preventDefault(event);//比如a的href跳转
//阻止事件冒泡
EventUtil.stopPropagation(event);//比如body也有click事件,则不执行body的click }
</script>

javascript 跨浏览器事件处理的更多相关文章

  1. JavaScript跨浏览器事件处理

    var EventUtil = { getEvent: function(event){ return event ? event : window.event; }, getTarget: func ...

  2. JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

    事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...

  3. JavaScript跨浏览器绑定事件函数的优化

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

  4. JavaScript跨浏览器处理事件以及相关对象

    主流的浏览器和IE浏览器在处理事件和事件对象上是有所区别的,我们一般会通过EventUtil进行封装,这样,就可以正常的跨浏览器处理事件了,本文的主要内容总结自<JavaScript高级程序设计 ...

  5. javascript跨浏览器事件对象类库

    一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...

  6. Javascript跨浏览器的事件对象

    一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...

  7. 封装常用的Javascript跨浏览器方法

    var EventUntil={ // 跨浏览器的添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListen ...

  8. javascript跨浏览器操作xml

    //跨浏览器获取xmlDom function getXMLDOM(xmlStr) { var xmlDom = null; if (typeof window.DOMParser != 'undef ...

  9. 原生javascript跨浏览器常用事件处理

    var eventUntil = {             getEvent: function (event) {//获取事件                 return event ? eve ...

随机推荐

  1. 后台CMS日志处理记录

    自从上一次添加了极光推送之后,我的工程就像是着魔了一样,不管怎么调整,日志级别都是DEBUG. 启动一次工程会打印很多无用日志,今天决定抽时间去研究了一下,最终解决了问题,下面记录一下解决过程. 1. ...

  2. 一个端口划到多个VLAN

    不想启路由的情况下,希望将一个端口划到多个VLAN中去,其目的有如下几点: 1.隔离不想让相互访问的端口.(如两个部门) 2.让都需要访问的端口划到所有VLAN.(如共享服务器) 3.不启路由协议.( ...

  3. Tomcat Manager用户名和密码

    在浏览器输入http://localhost:8080/,打开Tomcat自带的默认主页面,右侧有“administration”“documentation”等模块.选择“administratio ...

  4. Esper epl语句实验

    基础代码见下,下文列举的实验都是在此程序基础上改动. all,snapshot,first String epl = "select * from appTable.win:time(5 s ...

  5. C/C++内存管理详解(转)

    内存分配方式 简介 在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区. 栈:在执行函数时,函数内局部变量的存储单元都可以在栈上创建,函数执行结束时这些存储单元自动 ...

  6. hdu2222Keywords Search字典树入门……

    #include<iostream> #include<cstring> using namespace std; struct node { int num; node *n ...

  7. Oracle 修改带数据的字段类型

    http://www.cnblogs.com/LDaqiang/articles/1157998.html由于需求变动,现要将一个类型NUMBER(8,2)的字段类型改为 char.大体思路如下:   ...

  8. 硬件问题大杂烩&Coffee lake框图

    PCB阻抗控制 https://www.cnblogs.com/lifan3a/articles/6095372.html 1.高速差分信号串联AC耦合电容什么请况下要做镂空处理: (1)为了阻抗匹配 ...

  9. 设计模式 - 代理模式(proxy pattern) 未使用代理模式 具体解释

    代理模式(proxy pattern) 未使用代理模式 详细解释 本文地址: http://blog.csdn.net/caroline_wendy 部分代码參考: http://blog.csdn. ...

  10. 一起学Django之Day01

    创建项目 SimilarFacedeMacBook-Pro:PycharmProjects similarface$ django-admin startproject StudyDjango 创建A ...