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 ...
随机推荐
- 巧妙地用二叉树完成算式计算算法<计算器，二叉树，C++，独辟蹊径>
#01.引言,我们知道算式计算的问题是栈里面一个非常经典的题目.但是用栈来实现是一个非常麻烦的过程,第一要解决算式判断,是否为符合规则的算式,第二要由中最表达式转化为后缀表达式.这两个部分是栈实现计算 ...
- DSP(1) -- 离散时间信号的序列类型
1.单位采样序列δ(n):在MATLAB 中函数zeros(1,N)产生一个由N个零组成的列向量.它可用来实现有限区间的δ(n).然而,更高明的方法是利用逻辑关系式n==0来实现δ(n). 2.单位阶 ...
- DBCC SHOWCONTIG、DBCC DBREINDEX。
use dbname declare @table_id int set @table_id=object_id('tablename') dbcc showcontig(@table_id) 解释如 ...
- spring aop实现
Spring 有如下两种选择来定义切入点和增强处理. 基于 Annotation 的"零配置"方式:使用@Aspect.@Pointcut等 Annotation 来标注切入点和增 ...
- Java中super的几种用法并与this的区别
1. 子类的构造函数如果要引用super的话,必须把super放在函数的首位. class Base { Base() { System.out.println("Base"); ...
- LeetCode OJ-- 二战 Palindrome Number
判断一个 int 是否为回文的 有一点要注意的是: int x; int _x = abs(x); 对 x 取绝对值的时候,会发生溢出.比如 x = INT_MIN 即 -2147483648 而 ...
- UML类图6种关系的总结
http://www.open-open.com/lib/view/open1328059700311.html
- Struts1 action重定向跳转 带参数
ActionForward forward = new ActionForward("kmRentalMain.do?method=view&fdId="+id);forw ...
- 移动App崩溃的测试用例设计
我们的日常生活中对移动设备越来越多的使用意味着移动App测试这个主题已成为需要考虑的一个无法避免的问题.根据最近的调查研究,用户难以容忍有bug的移动App. 移动App Bug的影响是用户体验差.A ...
- 给mysql的root用户
grant all privileges on *.* to 'root'@'%' identified by 'root' with grant option;