1. <div id="myDiv" style="width:100px; height:100px; border:1px solid #f00;"></div>
  1. <script>
  2. /**
  3. * 跨浏览器事件处理
  4. **/
  5. var EventUtil = {
  6. //添加事件
  7. addHandler:function(element, type, handler){
  8. if(element.addEventListener){
  9. element.addEventListener(type, handler, false);
  10. }else if(element.attachEvent){
  11. element.attachEvent("on"+type,handler);
  12. }else{
  13. element["on" + type] = handler;
  14. }
  15. },
  16. //获取事件对象
  17. getEvent:function(event){
  18. return event ? event : window.event;
  19. },
  20. //获取元素对象
  21. getTarget:function(event){
  22. return event.target || event.srcElement;
  23. },
  24. //删除默认事件
  25. preventDefault:function(event){
  26. if(event.preventDefault){
  27. event.preventDefault();
  28. }else{
  29. event.returnValue = false;
  30. }
  31. },
  32. //删除事件
  33. removeHandler:function(element, type, handler){
  34. if(element.removeEventListener){
  35. element.removeEventListener(type, handler, false);
  36. }else if(element.detachEvent){
  37. element.detachEvent("on" + type, handler);
  38. }else{
  39. element["on" + type] = null;s
  40. }
  41. },
  42. //阻止事件冒泡
  43. stopPropagation:function(event){
  44. if(event.stopPropagation){
  45. event.stopPropagation();
  46. }else{
  47. event.cancelBubble = true;
  48. }
  49. },
  50. //获取相关元素(mouseove和mouserout事件可能用的到)
  51. getRelatedTarget:function(event){
  52. if(event.relatedTarget){
  53. return event.relatedTarget;
  54. }else if(event.toElement){
  55. return event.toElement;
  56. }else if(event.fromElement){
  57. return event.fromElement;
  58. }else{
  59. return null;
  60. }
  61. }
  62. };
  63. /**
  64. * 使用方法实例
  65. **/
  66. var myDiv = document.getElementById("myDiv");
  67. //添加事件
  68. EventUtil.addHandler(myDiv, 'click',addEventFun);
  69. //删除事件
  70. //EventUtil.removeHandler(myDiv, 'click', addEventFun);
  71. function addEventFun(event){
  72. //获取事件对象event
  73. var eventName = EventUtil.getEvent(event);
  74. console.log(eventName);
  75. //获取元素对象
  76. var elementTarget = EventUtil.getTarget(event);
  77. console.log(elementTarget);
  78. //删除默认事件
  79. EventUtil.preventDefault(event);//比如a的href跳转
  80. //阻止事件冒泡
  81. EventUtil.stopPropagation(event);//比如body也有click事件,则不执行body的click
  82.  
  83. }
  84. </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. hdu1874最短路

    裸裸的最短路问题,将while(scanf("%d%d", &N, &M)!=EOF)粗心写为while(scanf("%d%d", & ...

  2. hdu 3392(滚动数组优化dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3392 Pie Time Limit: 6000/3000 MS (Java/Others)    Me ...

  3. Linux多线程编程-信号量

    在Linux中.信号量API有两组.一组是多进程编程中的System V IPC信号量.另外一组是我们要讨论的POSIX信号量. 这两组接口类似,但不保证互换.POSIX信号量函数都已sem_开头,并 ...

  4. IT行业是吃青春饭的吗?

    作者:杨中科 1.“it专业的学生太多了,而且就业压力很大”是吗?     现在各个大学为了赚钱拼命扩招,所以不仅IT专业的学生人比较多,而且其他专业的学生人数也比较多,“僧多粥少”就通常意味着就业压 ...

  5. 2016年蓝桥杯C/C++B组

    第一次參加蓝桥杯.也是有非常多感触的,时间全然不够写最后一题... 最后一题没做...还有全排序非常重要... 1. 煤球数目 有一堆煤球,堆成三角棱锥形.详细: 第一层放1个, 第二层3个(排列成三 ...

  6. linux 查找并操作

    find -depth 1 -name 'aa*' | xargs tar -cvf aa.tar 这个命令将为查找当前目录下的所有已aa开头的文件,然后将所有结果"执行打包",打 ...

  7. mysql中UNIX_TIMESTAMP()函数和php中time()函数的区别

    http://tech.ddvip.com/2009-01/1231392775105351.html mysql 中:UNIX_TIMESTAMP(), UNIX_TIMESTAMP(date) 若 ...

  8. c#中使用ABCpdf处理PDF,so easy

    QQ交流群:276874828  (ABCpdf ) 这几天项目中需要将页面导成PDF,刚开始使用iTextSharp,觉得在分页处理上比较复杂,后来无意中看到了ABCpdf,使用非常简单,并将一些常 ...

  9. ORCAD中的一些操作小技巧

    1.ORCAD中改变元器件和文本字体颜色的命令: 打开在 View -> Toolbar -> Command Window.然后圈选文字(可复选),然后到 Command Window ...

  10. Spring学习四----------Bean的配置之Bean的配置项及作用域

    © 版权声明:本文为博主原创文章,转载请注明出处 Bean的作用域(每个作用域都是在同一个Bean容器中) 1.singleton:单例,指一个Bean容器中只存在一份(默认) 2.prototype ...