1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>如何绑定事件处理函数</title>
  6.     <style type="text/css"></style>
  7. </head>
  8. <body>
  9. <div style="width: 100px;height: 100px; background-color: red;"></div>
  10. <script type="text/javascript">
  11.     function addEvent(elem,type,handle) {
  12.         if(elem.addEventListener){
  13.             elem.addEventListener(type,handle,false);
  14.         }else if(elem.attachEvent){
  15.             elem.attachEvent('on'+type,function () {
  16.                 handle.call(elem); //.call()方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)
  17.             })
  18.         }else{
  19.             elem['on'+type] = handle;
  20.         }
  21.     }
  22.     var div = document.getElementsByTagName('div')[0];
  23.     addEvent(div,'click',function () {
  24.         console.log('aaa')
  25.  
  26.     })
  27.     addEvent(div,'click',function () {
  28.         console.log('bbb')
  29.  
  30.     })
  31.  
  32. </script>
  33.  
  34. </body>
  35. </html>
  36.  
  37. <strong>代码说明</strong>
  38. <div><b>1.</b>obj.addEventListener(type,fn,false)IE9以下不兼容，可以为一个事件绑定多个处理程序</div>
  39. <div><b>2.obj.attachEvent('on'+type,fn)</b>IE独有，一个事件同样可以绑定多个处理程序</div>
  40. <div><b>3.</b>ele.onxxx=function(event){}兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序；基本等同于写在HTML行间上</div>

效果图：使用原生js，addEventListener,给每个li元素绑定一个click事件，输出他们的顺序?

1.obj.addEventListener(type,fn,false);

 div.addEventListener(事件类型，处理函数，false);

如：div.addEventListener('click',function(){},false)

javascript点击兼容所有浏览器封装的更多相关文章

  1. 原生JavaScript拖动div兼容多种浏览器

    说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="t ...

  2. [代码收藏]设为首页和加入收藏的JavaScript代码（兼容多浏览器）

    其实不少非IE内核浏览器都仍不支持通过代码将网页设为主页和加入收藏的功能,因此说是兼容,其实只是一个try,catch后的提醒而已. 加入收藏: /* * author : 2010-12-27 11 ...

  3. JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  4. javascript 兼容各个浏览器的事件

  5. 【Selenium05篇】python+selenium实现Web自动化：读取ini配置文件,元素封装,代码封装,异常处理,兼容多浏览器执行

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第五篇博 ...

  6. JavaScript 图片的上传前预览（兼容所有浏览器）

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  7. JavaScript文件下载 兼容所有浏览器 不可跨域

    前端文件下载 兼容所有浏览器 download.js文件下载,几乎支持所有类型下载,详细内容参考官网 http://danml.com/download.html 引入文件 <script sr ...

  8. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  9. Zclip复制页面内容到剪贴板兼容各浏览器

    Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...

随机推荐

  1. 转 Android:文件下载和写入SD卡学习小结

    转自 http://blog.csdn.net/zzp_403184692/article/details/8160739  一.文件下载  Android开发中,有时需要从网上下载一些资源以供用户使 ...

  2. ajax请求后台有时走有时不走

    ajax请求后台有时走有时不走   ajax请求后台有时走有时不走,是因为没有将请求设置为同步方式,async:false,(默认为true即异步).如果不想使用缓存可以将cache:false,例如 ...

  3. Red Hat Cluster Suite 组件 fencing FAQ

    说明 Red Hat Cluster实现HA的关键组件之一是fencing.没有设置fencing,虽然看上去也能够运行Cluster,但是一旦遇到故障切换就会出现异 常,所以深入理解fencing原 ...

  4. [C++] 2D Array's memory allocation

    2D Array's memory allocation

  5. code2198 数字三角形WWW

    数字三角形的新变种 设要经过的点为x y,那么dp[x][k] = -Max    k=1~x and k!=y 其他一样:dp[i][j] = max(dp[i-1][j],dp[i-1[j-1]) ...

  6. Part3_lesson2---ARM指令分类学习

    1.算术和逻辑指令 mov.mvn.cmp.tst.sub.add.and.bic 2.比较指令 cmp和tst 3.跳转指令 b和bl 4.移位指令 lsl和ror 5.程序状态字访问指令 msr与 ...

  7. 利用crosstool-ng自动化编译交叉编译环境(转)

    原文地址:http://www.bootc.net/archives/2012/05/26/how-to-build-a-cross-compiler-for-your-raspberry-pi/ A ...

  8. explain分析sql效率

    Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决,Explain可以用来查看SQL语句的执行效 果,可以帮助选择更好的索引和优化查询语句,写出更好的优 ...

  9. CodeForces 342B Xenia and Spies （水题模拟，贪心）

    题意:给定 n 个间谍,m个区间,一个 s,一个f,然后从 s开始传纸条,然后传到 f,然后在每个 t 时间在区间内的不能传,问你最少的时间传过去. 析:这个题,就模拟一下就好,贪心策略,能传就传,找 ...

  10. 检测远程主机上的某个端口是否开启——telnet命令

    要测试远程主机上的某个端口是否开启,无需使用太复杂的工作,windows下就自带了工具,那就是telnet.ping命令是不能检测端口,只能检测你和相应IP是否能连通. 1 安装telnet.win7 ...