<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. 多源最短路径Floyd算法

    多源最短路径是求图中任意两点间的最短路,采用动态规划算法,也称为Floyd算法.将顶点编号为0,1,2...n-1首先定义dis[i][j][k]为顶点 i 到 j 的最短路径,且这条路径只经过最大编 ...

  2. HDU2830

    一开始把题目意思理解错啦,做那好久没做出来.本题是一个dp问题:题目说列可以无限次对换,设矩阵为M[i][j],要找到面积大的矩形其实就是处理连续1的个数问题,用d[i][j](i表示行,j表示列)表 ...

  3. python的安全插件

    1.PyFuzz (0.1.3)                                                         - Simple fuzz testing for u ...

  4. voliatilekeyword

    啃书的时候,发现了这个keyword. 曾经都没有听过.唉,我真是孤陋寡闻啊... C/C++ 中的 volatile keyword和 const 相应,用来修饰变量,通经常使用于建立语言级别的 m ...

  5. Google SEO 学习网站记录

    在搜索结果中创建良好的标题和摘要: https://support.google.com/webmasters/answer/35624?hl=zh-Hans&ref_topic=600194 ...

  6. 【开发总结】—— BABYLON 3D开发常见问题及解决方法

    前言:组内同事们根据长时间的Babylon.js开发实践,一起将项目开发中遇到的问题及解决方法做了一个梳理. ios [最好] 关闭离线缓存—— 解决添加了反射的mesh 丢失的问题 不要使用 pos ...

  7. Android内存泄露调试

    Android 内存泄漏调试 一.概述 如果我们编写的代码当中有太多的对内存使用不当的地方,难免会使得我们的设备运行缓慢,甚至是死机.为了能够使得 Android 应用程序安全且快速的运行, Andr ...

  8. OpenTSDB设计解读

    OpenTSDB是基于HBase存储时间序列数据的一个开源数据库,确切地说,它仅仅是一个HBase的应用而已,其对于时间序列数据的处理能够供其它系统參考和借鉴.本文会针对它在数据库的设计方面展开一些探 ...

  9. ROR部署到Heroku出现Application Error和code=H10 desc=&quot;App crashed“问题

    1.问题发现之前的准备 在读<Learn Python In Hard Way>的时候,发现作者谈到一个非常有趣的事情,在做一些有趣的事情之前做的无聊的事情叫做yak shaving,牦牛 ...

  10. Bootstrp--一个导航面板切换的实用例子

    <!--导航区开始--> <ul class="nav nav-tabs nav-stacked" role="tablist"> &l ...