addEventListener、attachEvent、cancelBubble兼容性随笔
一、前言
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兼容性随笔的更多相关文章
- addEventListener attachEvent和解决IE 6 7 8 this指向错误
[JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误 电梯直达 1# php 发表于 2014/4/13 01:17 | 只看该作者 ...
- js addEventListener attachEvent
attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementB ...
- javascript中addEventListener(attachEvent)具体解释
addEventListener 有三个參数:第一个參数表示事件名称(不含 on,如 "click").第二个參数表示要接收事件处理的函数:第三个參数为 useCapture.样例 ...
- javascript event兼容性随笔
一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...
- javascript opacity兼容性随笔
一.CSS兼容代码 .transparent { filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* FireFox old version ...
- javascript Xml兼容性随笔
一.前言 (function (window) { if (!window.jasen) { window.jasen = {}; } if (!window.jasen.core) { window ...
- javascript position兼容性随笔
一.Javascript源码 if (!window.jasen.core.Position) { window.jasen.core.Position = {}; } function Size(w ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
- dojo事件驱动编程之事件绑定
什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...
随机推荐
- gulp LiveReload middleware
用yo搭建的angular项目,用gulp自动化构建. 自动化构建主要的功能大致有: 1. 文件压缩 2. 文件重命名 3. 文件合并 4. css,js文件自动引入到html 5. 自动刷新 ... ...
- mysql 上传数据到指定字段
新建表prizecode,字段为code varchar(45) not null , usedAt TIMESTAMP;数据存放在 E:\prizecode\ 目录下,下面是上传语句 LOAD DA ...
- 4.代码同时托管到github和git.oschina.net
我的开源项目托管在Github,同时在Git@OSC也有备份,有两个地方,是不是很麻烦呢?非也非也,下面介绍一下我是怎么做的. 1.先在Github新建一个项目,点击Github主页右上角的加号 -& ...
- SQL Server 数据库 'xxx' 正处于转换状态。请稍后再尝试该语句。
问题是这样的,最近因义务需要,公司更换了数据库服务器.数据库随之切换到新的服务器上. 服务器是 Windows Server 2012系统,数据库是SQL Server 2012 .上面有 多个数据库 ...
- linux备忘
一.数字计算 echo $[3600*24] --只能计算整数echo $((3600*4)) --只能计算整数 expr 3600 \* 24 --注意空格,*要加\,只能计算整数ec ...
- final、finally、finalize的区别
看C#知识点的时候发现的问题 1.final 修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为f ...
- Wind7系统下 wifi设置
netsh wlan set hostednetwork mode=allow ssid=pass:123456789 key=123456789 netsh wlan set hostednetw ...
- linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)(zz)
linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl) 分类: linux2011-10-10 13:21 8773人阅读 评论(1) 收藏 举 ...
- js二维数组与字符串
1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...
- iOS多线程 GCD常见用法
Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法. dispatch queue分成以下三种: 1)运行在主线程的Main queue,通过dispat ...