一、前言

1、 element.addEventListener(eventType, handler, capture);

（1）参数eventType是要注册句柄的事件类型名。

（2）参数handler是句柄函数，在指定类型事件发生时调用该函数。

（3）参数capture用于在事件传播的捕获阶段事件句柄是否用于捕捉事件。

2、element.attachEvent("on" + eventType, handler);

该方法作为全局函数调用，而不是作为事件句柄所注册的元素的方法来调用的。允许同一个事件句柄函数多次注册。

3、相关自定义类Binder代码如下：

 (function (window) {

     if (!window.jasen) {

         window.jasen = {};

     }

     if (!window.jasen.core) {

         window.jasen.core = {};

     }

     if (!window.jasen.core.Binder) {

         window.jasen.core.Binder = {};

     }

     if (typeof jasen.core.Binder != "object") {

         throw new Error("Invalid entity jasen.core.Binder!");

     }

     function bind(element, eventType, handler, capture) {

         if (typeof element == "string") {

             element = document.getElementById(element);

         }

         if (typeof capture != "Boolean") {

             capture = false;

         }

         if (element.addEventListener) {

             element.addEventListener(eventType, handler, capture); // Allow to register the same event handler only one.

         }

         else if (element.attachEvent) {

             if (capture) {

                 element.setCapture();

             }

             element.attachEvent("on" + eventType, handler); // Allow to register the same event handler more times.

         }

         else {

             element["on" + eventType] = handler; // Non support Capture.

         }

     }

     function unbind(element, eventType, handler, releaseCapture) {

         if (typeof element == "string") {

             element = document.getElementById(element);

         }

         if (typeof releaseCapture != "Boolean") {

             releaseCapture = false;

         }

         if (element.removeEventListener) {

             element.removeEventListener(eventType, handler, releaseCapture);

         }

         else if (element.detachEvent) {

             if (releaseCapture) {

                 element.releaseCapture();

             }

             element.detachEvent("on" + eventType, handler);

         }

         else {

             element["on" + eventType] = null;

         }

     }

     function cancelBubble(e) {

         e = e || window.event;

         if (e.stopPropagation) {

             e.stopPropagation();

         }

         else {

             e.cancelBubble = true; //IE

         }

     }

     var binder = window.jasen.core.Binder;

     binder.bind = bind;

     binder.unbind = unbind;

     binder.cancelBubble = cancelBubble;

     window.Binder = binder;

 })(window);

二、范例

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

<head runat="server">

    <title></title>

    <script type="text/javascript" src="Scripts/jasen.core.Binder.js"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input type="button" id="test" value="bind element"/>

    </div>

    <script type="text/javascript">

        jasen.core.Binder.bind("test", "click", function () { alert("....."); }, true);

    </script>

    </form>

</body>

</html>

addEventListener、attachEvent、cancelBubble兼容性随笔的更多相关文章

  1. addEventListener attachEvent和解决IE 6 7 8 this指向错误

    [JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误   电梯直达 1#    php 发表于 2014/4/13 01:17 | 只看该作者  ...

  2. js addEventListener attachEvent

    attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementB ...

  3. javascript中addEventListener(attachEvent)具体解释

    addEventListener 有三个參数:第一个參数表示事件名称(不含 on,如 "click").第二个參数表示要接收事件处理的函数:第三个參数为 useCapture.样例 ...

  4. javascript event兼容性随笔

    一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...

  5. javascript opacity兼容性随笔

    一.CSS兼容代码 .transparent { filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* FireFox old version ...

  6. javascript Xml兼容性随笔

    一.前言 (function (window) { if (!window.jasen) { window.jasen = {}; } if (!window.jasen.core) { window ...

  7. javascript position兼容性随笔

    一.Javascript源码 if (!window.jasen.core.Position) { window.jasen.core.Position = {}; } function Size(w ...

  8. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

  9. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

随机推荐

  1. Windows XP SP3 VC6环境下成功编译openssl-0.9.8zh

    1.下载openssl-0.9.8zh解压到f:\openssl-0.9.8zh 下载nasm-2.12.03rc1解压到D:\develop\nasm-2.12.03rc1并把添加到系统环境变量PA ...

  2. Volley设计思想和流程分析

    本文是对Volley思路的整体整理,并不是Volley教程,建议有Volley使用经验,但是对Volley整体不是很清楚的同学阅读. 我认为,弄清整体的流程很重要,以避免一叶障目不见泰山的囧境,而对于 ...

  3. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  4. Scala学习笔记一

    首先是安装Scala 下载Scala进行安装 http://www.scala-lang.org/ 安装好scala后,为scala配置系统环境参数 新建环境变量SCALA_HOME,值为scala安 ...

  5. 关于公司VPN专线接入的一个案例

    最近互通网络技术部门收到一到封邮件,是关于公司VPN接入的问题,问题如下: 条件:A区为办公地点1,其他办公电脑20台,并通过写字楼的宽带接口联通外网. B区为新办公地点2,预设应用.数据库.备份服务 ...

  6. 如何解决pycharm输入中文报错问题

    在pycharm中的python文件中输入中文会报错SyntaxError: 问题解决方法在文件开头添加 : # -*- coding:utf-8 -*- 每次添加都很麻烦,一劳永逸解决此问题的方法: ...

  7. netload 加载程序集抛异常----无法加载程序集解决办法

    netload 加载程序集抛异常----无法加载程序集 错误信息如下: 无法加载程序集.错误详细信息: System.BadImageFormatException: 未能加载文件或程序集“file: ...

  8. Area区域

    1.mvc4.0新增的area区域机制,可以协助你在架构较为大型的项目,让独立性较高的部分功能独立成一个MVC子网站,以降低网站与网站之间的耦合性,也可以通过area的切割,让多人同时开发同一个项目时 ...

  9. 数据契约（DataContract）

    原文地址:http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html 服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务 ...

  10. jQuery - 自定义伪类 [:pseudoclass]

    有两种创建伪类的方法, 第一种, $.extend( $.expr[':'], { // 自定义的伪类名称:group group: function(element, index, matches, ...