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 ...
随机推荐
- Source Insight 3.X utf8支持插件更新
[更新内容] 修复了当UTF8文件外部改变时,SI无法检测到的bug. 实现 [下载地址] 点我 [计划] 未来(无限长)优化utf8编码检测规则,提高准确度.
- jquery 给input赋值错误写法
<script type="text/javascript"> var ue = UE.getEditor('container'); function getCont ...
- [04]APUE：文件与目录
[a] stat / lstat / fstat #include <sys/stat.h> int stat(const char *restrict pathname, struct ...
- 关于session和token
最近做的项目是全平台的,需要给移动端做后台,有了许多改变,如是使用token而不是session.一开始我无法理解为什么不用session,看了很多文章以后才有一定了解. 例如在ios端, ...
- JSP/Servlet相关
1 简介 JSP(Java Server Page)和Servlet是JavaEE规范的两个基本成员,是JavaWeb开发的重点. JSP的本质是Servlet,当用户向指定的Servlet发送请求时 ...
- Samba的安装与配置
Samba的安装与配置: 准备:关闭其他虚拟设备 #/etc/init.d/libvirtd stop #/etc/init.d/xend stop #chkconfig libvirtd off # ...
- Head First 设计模式读书笔记
在网上学习了一段时间设计模式,总感觉不系统,很容易忘,最近买书,学习了<Head First设计模式>,受益匪浅,特做此记录,以便激励自己不断的向后学习. 原书JAVA版本,本次学习记录及 ...
- 用Python写爬虫爬取58同城二手交易数据
爬了14W数据,存入Mongodb,用Charts库展示统计结果,这里展示一个示意 模块1 获取分类url列表 from bs4 import BeautifulSoup import request ...
- 浅谈城市规划在移动GIS方面的应用发展
1.概述 城市建设进程加快,城市规划管理工作日趋繁重,各种来源的数据产生各种层出不穷的问题,严重影响城市规划时的准确性,为此全面合理的掌握好各方面的城市规划资料才能做出更加科学的决策.移动端的兴起为规 ...
- 注意ArrayAdapter的Add()方法
ArrayAdapter类可以作为ListView等的适配器资源,并且可以动态向适配器中添加新的数据,这就是ArrayAdapter.Add()方法的作用.但是在使用该方法时如果出错,那就需要检查Ar ...