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

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. 1934: [Shoi2007]Vote 善意的投票 - BZOJ

    Description幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可以 ...

  2. java 非法字符过滤 , 半角/全角替换

    java 非法字符过滤 , 半角/全角替换 package mjorcen.netty.test1; import java.io.UnsupportedEncodingException; publ ...

  3. AnkhSVN 安装

    为 visual Studio 2013 添加 AnkhSVN 步骤 到 https://ankhsvn.open.collab.net/downloads 下载 2.6x或以上 安装 AnkhSvn ...

  4. [设计模式] 22 模板方法模式 template

    转http://www.jellythink.com/archives/407 在GOF的<设计模式:可复用面向对象软件的基础>一书中对模板方法模式是这样说的:定义一个操作中的算法骨架,而 ...

  5. spring <context:component-scan>(转)

    在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的类,则把这些类 ...

  6. 全球说：要给 OneAlert 点100个赞

    客户背景 「全球说」 Talkmate,是北京酷语时代教育科技有限公司(酷语科技)旗下产品,酷语科技是一家诞生于中国的语言技术公司,致力于为全球用户提供一个全新的多语言学习和社交网络平台 . 全球说是 ...

  7. POJ 2029 Get Many Persimmon Trees（DP||二维树状数组）

    题目链接 题意 : 给你每个柿子树的位置,给你已知长宽的矩形,让这个矩形包含最多的柿子树.输出数目 思路 :数据不是很大,暴力一下就行,也可以用二维树状数组来做. #include <stdio ...

  8. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  9. DataTime.Now.Ticks的应用

    参考:http://www.cnblogs.com/delphinet/archive/2011/06/09/2075985.html 转换成秒: using System; using System ...

  10. 1829 A Bug's Life

    A Bug's Life Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...