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 ...
随机推荐
- spring boot 学习笔记(二) 构建web支持jsp
一.必须将项目打包成war包 <packaging>war</packaging> 二.pom.xml加入依赖包 <dependency> <groupId& ...
- jquery 清空 iframe 的内容，，iframe自适应高度
$(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...
- POJ 3281 Dining 最大流
饮料->牛->食物. 牛拆成两点. //#pragma comment(linker, "/STACK:1024000000,1024000000") #include ...
- My安卓知识1--SQLite数据库
前一阵子做了一个小项目,关于android的,想记录一下学到的一些知识,做成一个小系列吧,算是对自己这一个多月来的见证.首先说明,这些知识也都是从网上各处学习来的,我自己做了一些小整理. 1.SQLi ...
- Sql Server 2008卸载后再次安装一直报错
sql server 2008卸载之后再次安装一直报错问题. 第一:由于上一次的卸载不干净,可参照百度完全卸载sql server2008 的方式 1. 用WindowsInstaller删除所有与S ...
- REST有状态与无状态的理解
1. 什么是REST? REST(REpresentation State Transfer)表述性状态传递,是一种软件架构风格,是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可 ...
- IIS 7 Web服务器上部署ASP.NET网站(转)
IIS 7 Web服务器上部署ASP.NET网站小记 摘自:http://swanmsg.blog.sohu.com/162111073.html 网上查找了很久关于iis7配置asp.net配置问题 ...
- cassandra-replication_factor 和 consistency level
参考 replication_factor 决定了数据会被写到多少个节点.为2表示要写到两个节点. consistency level决定客户端要等待多少个节点被写成功.为1表示只要第一个节点被写成功 ...
- QQ邮箱发送邮件，出现mail from address must be same as authorization user错误
之前做的一个系统,有个发送邮件的功能,一直能正常使用,今天同事说QQ邮箱发送不了. 立马着手调试,发现服务器一直出现“mail from address must be same as authori ...
- php生成网页桌面快捷方式
本文将介绍使用PHP生成网页桌面快捷方式的代码,并添加图标及解决不同浏览器保存出现的乱码问题. 我们访问网站时,如果网站的内容很有吸引,一般我们都会使用浏览器的收藏夹功能,收藏此网站. 在浏览器收藏的 ...