<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. python __new__和__init__的区别

    http://www.cnblogs.com/tuzkee/p/3540293.html 继承自object的新式类才有__new__ __new__至少要有一个参数cls,代表要实例化的类,此参数在 ...

  2. EasyMvc入门教程-基本控件说明(4)折叠面板

    折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...

  3. Drools的HelloWord例子

    添加drools框架运行的依赖 <!--Drools 规则相关 --> <dependency> <groupId>org.drools</groupId&g ...

  4. 更新到mysql 5.7后解决0000-00-00日期问题

    更新到mysql 5.7后解决0000-00-00日期问题 学习了:http://www.07net01.com/2016/04/1479450.html mysql 5.7 默认开始用以下sql m ...

  5. 转: 微信开源C/C++ RPC框架PhxRPC

    转自: http://mp.weixin.qq.com/s?__biz=MzI4NDMyNTU2Mw==&mid=2247483734&idx=1&sn=da364812eca ...

  6. android(cm11)状态栏源代码分析(一)

    (一):写在前面 近期因为工作须要,须要了解CM11中的有关于StatusBar相关的内容.总的来说,刚開始阅读其源代码的时候,是有点困难,只是通过构建相关代码的脑图和流程图,几天下来.我已经对其源代 ...

  7. 微信小程序 - 单个题目

    后端传过来的数据,如果通过wx:for遍历出来那就是一个页面全部排下来.... 我的想法就是,页面初始化时设置一个默认值 1/50 就是 index+1 / 50(后端传过来的数组长度),通过控制in ...

  8. thinkphp5 中使用postgresql 缺少函数 table_msg

    参考解决办法 在postgresql 中执行命令 插入函数 https://blog.csdn.net/sinat_35767703/article/details/76070236?utm_sour ...

  9. 转:css:Position

    http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html http://blog.sina.com.cn/s/blog_4bcf4a5e ...

  10. swoole新手教程01-环境搭建及扩展安装

    写在前面的废话 <swoole源代码分析>已经写了13章,整个swoole的核心架构基本都分析的差点儿相同了.于是心里一直以来想整理swoole的文档并写一份教程的想法就再度浮了出来. 实 ...