<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. circular-array-loop(蛮难的)

    https://leetcode.com/problems/circular-array-loop/ 题目蛮难的,有一些坑. 前后两个指针追赶找环的方法,基本可以归结为一种定式.可以多总结. pack ...

  2. 七天学会ASP.NET MVC (四)——用户授权认证问题 【转】

    http://www.cnblogs.com/powertoolsteam/p/MVC_four.html 小编应各位的要求,快马加鞭,马不停蹄的终于:七天学会 Asp.Net MVC 第四篇出炉,在 ...

  3. docker selinux-enabled作用

    一.现象 在docker中有一个运行选项是selinux-enabled.这个选项的作用是啥? 简而言之,它提供了对docker容器中进程的selinux的控制支持.下面举例说明. 首先按照官方文档的 ...

  4. 过滤器Filter_03_多个Filter的执行顺序

    过滤器Filter_03_多个Filter的执行顺序 学习了:https://www.cnblogs.com/HigginCui/p/5772514.html 按照在web.xml中的顺序进行filt ...

  5. Docker 开源管理工具集锦

    俗话说工欲善其事.必先利其器.Docker 是一种详细的虚拟化技术,Docker 尽管以RestAPI形式提供服务.但在实际生产环境中,管理大规模集群部署的Docker容器确实是一个巨大的挑战.尽管D ...

  6. 读刘未鹏老大《你应当怎样学习C++(以及编程)》

    标签(空格分隔): 三省吾身 原文地址:你应当怎样学习C++(以及编程) 本人反思自己这些年在学校学得稀里糊涂半灌水. 看到这篇文章,感觉收获不少.仿佛有指明自己道路的感觉,当然真正困难的还是坚持学习 ...

  7. http协议(转http://www.cnblogs.com/guguli/p/4758937.html)

    一. HTTP协议的应用简单概况 HTTP协议的主要特点可概括如下: 1.支持客户/服务器模式.2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST ...

  8. GridView 获取列字段的几种途径

    GridView是ASP.NET中功能强大的数据显示控件,它的RowDataBound事件为我们提供了方便的控制行.列数据的途径. 要获取当前行的某个数据列,我在实践中总结有如下几种方法: 1. Ce ...

  9. hdu4405Aeroplane chess 概率dp水题

    //从0到n有n+1个格子 //对于格子i,掷一次骰子的数为x.那么能够从位置i到位置i+x //格子之间有连线,假设格子a和b有连线,那么从a到b不用掷骰子 //求从0到n的骰子掷的次数的期望 // ...

  10. java中的值传递和引用传递区别

    值传递:(形式参数类型是基本数据类型):方法调用时,实际参数把它的值传递给对应的形式参数,形式参数只是用实际参数的值初始化自己的存储单元内容,是两个不同的存储单元,所以方法执行中形式参数值的改变不影响 ...