兼容各主流浏览器的事件绑定（在同一个事件上添加多个处理函数）。

1.绑定方法：

 //IE attachEvent(事件名, 函数)

 oBtn.attachEvent('onclick', aaa);

 oBtn.attachEvent('onclick', bbb);

 //FF    addEventListener(事件名, 函数, 是否捕获 false)

 oBtn.addEventListener('click', aaa, false);

 oBtn.addEventListener('click', bbb, false);

2.例子：

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript">

 function aaa(){

     alert('a');

 }

 function bbb(){

     alert('b');

 }

 window.onload=function (){

     var oBtn=document.getElementById('btn1');

     /*oBtn.onclick=aaa;

     oBtn.onclick=bbb;  覆盖掉aaa*/

     if(oBtn.attachEvent){

         oBtn.attachEvent('onclick', aaa);

         oBtn.attachEvent('onclick', bbb);

     }

     else{

         oBtn.addEventListener('click', aaa, false);

         oBtn.addEventListener('click', bbb, false);

     }

 };

 </script>

 </head>

 <body>

 <input id="btn1" type="button" value="aaa" />

 </body>

 </html>

3.如何用于写一个用于时间绑定的公共函数

例子：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

function bind(obj, evname, fn) {

    if (obj.addEventListener) {

        obj.addEventListener(evname, fn, false);

    } else {

        obj.attachEvent('on' + evname, function() {

            fn.call(obj);

        });

    }

}

function aaa(){

    alert('a');

}

function bbb(){

    alert('b');

}

window.onload=function (){

    var oBtn=document.getElementById('btn1');

    bind(oBtn, 'click', aaa);

    bind(oBtn, 'click', bbb);

};

</script>

</head>

<body>

<input id="btn1" type="button" value="aaa" />

</body>

</html>
4.解除绑定（以IE为例）：
 <script type="text/javascript">

 window.onload=function ()

 {

     var oBtn=document.getElementById('btn1');

     //IE    attachEvent/detachEvent

     //FF    addEventListener/removeEventListener

     var a=function (){

         alert('dafsdf');

     };

     oBtn.attachEvent('onclick', a);

     oBtn.detachEvent('onclick', a);

 };

 </script>

注意：匿名函数解除不掉绑定（因为即使两个匿名函数长的一样，但是不是同一个函数）

attachEvent,addEventListener事件绑定的更多相关文章

  1. javascript之事件绑定

    曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...

  2. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  3. 监听事件绑定（addEventListener、attachEvent）和移除（removeEventListener、detachEvent）

    /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ funct ...

  4. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  5. js -- 绑定的click addEventListener 事件只触发一次

    var btn = document.getElementById('btn'); // 添加事件绑定 btn.addEventListener('click', btnClick, false); ...

  6. js addEventListener事件多次绑定问题

    如果为了避免 js addEventListener事件多次绑定问题,可以使用.onclick直接绑定,后一次click绑定会覆盖调前一次.

  7. 事件绑定addEventListener

    通过addEventListener监听函数实现的dom事件绑定 addEventListener可以为当前dom添加一个事件(这个事件可以是个已有的事件),这就无法避免我们在写代码的时候重复去绑定同 ...

  8. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  9. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

随机推荐

  1. Python random模块 例子

    最近用到随机数,就查询资料总结了一下Python random模块(获取随机数)常用方法和使用例子. 1.random.random  random.random()用于生成一个0到1的随机符点数: ...

  2. 移植linux4.7.2与ubifs到jz2440

    前言 整个暑假跟着韦东山的视频和书籍移植了linux2.3.6到jz2440,现在自己尝试移植linux4.7.2到板子上,并使用ubifs文件系统代替旧的jffs2文件系统. 下载交叉编译工具链 工 ...

  3. struts2传map到前台出现的问题

    后台打印出的错: 2016-08-16 13:42:52.652 WARN  org.apache.struts2.json.JSONWriter     - JavaScript doesn't s ...

  4. Eclipse 创建Maven工程

    前言 开发环境 sts-3.7.2.RELEASE 创建步骤 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显示创 ...

  5. 2014 Multi-University Training Contest 8

    官方解题报告:http://blog.sina.com.cn/s/blog_a19ad7a10102uzj7.html Area of Mushroom http://acm.hdu.edu.cn/s ...

  6. web系统之session劫持解决

    session劫持是一种比较复杂的攻击方法.大部分互联网上的电脑多存在被攻击的危险.这是一种劫持tcp协议的方法,所以几乎所有的局域网,都存在被劫持 可能. 两台主机要想进行TCP通信,必须经过一个三 ...

  7. Unity3D 优化相关

    抛砖引玉: http://www.luzexi.com/unity3d%E4%BC%98%E5%8C%96%E4%B9%8B%E8%B7%AF/ 关于图片 一.Unity3D自身会把导入的图片进行压缩 ...

  8. mysql_fetch_row,mysql_fetch_array,mysql_fetch_object,mysql_fetch_assoc区别

    1.mysql_fetch_row  只能以索引下标取值,从0开始. 2.mysql_fetch_array 能以索引下标取值,也可以用字段名称取值. 3.mysql_fetch_object 对象方 ...

  9. javax.mail.MessagingException: 501 Syntax: HELO hostname Linux端异常解决

    在项目里面使用javamail在window环境正常,放在服务器上面的时候抛出异常javax.mail.MessagingException: 501 Syntax: HELO hostname ,原 ...

  10. 个人Android作品开发——FinancePad记账通

    开发背景:针对在外工作的年轻一族,记录平时生活消费记录,方便清楚自己的钱花在哪些地方,方便管理. 开发时间:2013年7月中旬 开发环境:Eclipse Andorid SDK V2.0 开发语言:J ...