一、前言

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. C#实现简单的委托异步调用

    delegate void textAsy(); static void Main(string[] args) { textAsy t = texts; AsyncCallback callBack ...

  2. OC基础语法之方法

    看惯了c#的代码再去看Object-C的代码,总感觉有点懵逼,记录下OC的方法用法:   在OC中一个类中的方法有两种类型:实例方法(类似于非静态函数),类方法(类似非静态函数). 实例方法前用(-) ...

  3. gulp插件gulp-ruby-sass和livereload插件

    gulp-ruby-sass是gulp的一个插件,主要是用来实现sass编译,livereload插件主要是实现文件保存时浏览器自动刷新,避免了手动f5的频繁的操作 准备工作:chrome浏览器安装l ...

  4. PD中将Comment 从Name复制值

    PD中将Comment 从Name复制值, 将以下语句考到,pd 工具栏下的执行脚本中执行下就OK了 Option Explicit ValidationMode = True Interactive ...

  5. Asp.Net MVC4入门指南（8）：给数据模型添加校验器

    在本节中将会给Movie模型添加验证逻辑.并且确保这些验证规则在用户创建或编辑电影时被执行. 保持事情 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己(Don’ ...

  6. IOS中无缓存的图片载入

    在IOS中,我们常用[UIImage imageNamed]方法获取图像,这种方法简便,容易理解.但是有个缺点,就是有缓存.这种方式 传人的图像的就是通过文件名方式文件名.如果,我们内存有限,我们就必 ...

  7. break continue.

    1.break与continue.这两个关键字一般放在循环的花括号里面使用.break——结束整个循环.continue——结束本次循环,进入下次循环. 2.while循环 //初始条件 while( ...

  8. qweb

    qweb 是 odoo的模板系统, 在 odoo系统中, 它有不同的用途和实现, 一个是 web client 的 widget 的渲染引擎, 它是通过 javascript实现的,也是 最早引入到 ...

  9. mvc AddImplicitRequiredAttributeForValueTypes

    1.AddImplicitRequiredAttributeForValueTypes (为值类型添加隐式必填验证),默认值 为true.刚在mvc view(html)中会为model的值类型属性( ...

  10. C#之方法的重载与递归

    (1). 方法的重载:方法的名称相同,但参数不同. 1.如果参数的个数相同,那么参数的类型不能相同. 2.如果参数的类型相同,那么参数的个数不能相同. (2).方法的递归:方法自己调用自己.用于找出一 ...