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 ...
随机推荐
- composer 安装
安装composer wget http://curl.haxx.se/ca/cacert.pem curl -sS https://getcomposer.org/installer | php - ...
- Oracle归档模式和非归档模式
一 什么是Oracle归档模式? Oracle数据库有联机重做日志,这个日志是记录对数据库所做的修改,比如插入,删除,更新数据等,对这些操作都会记录在联机重做日志里.一般数据库至少要有2个联机重做日志 ...
- 大漠绑定测试工具-VB6
获取更新开始|版本:3.1652版 2016年12月27日|更新内容:1.取消自动更新错误的提示.\n\n友情提示:如网盘失效,请加QQ群(568073679)下载最新版|下载地址:http://ww ...
- javascript里的继承
js里面继承的方式, 1. 类式继承,通过构造函数的继承 function extend(subClass, superClass){ var F = function(){}; F.prototyp ...
- k次出现与一次出现的数字
原始的题目是这样的: Single Number II Given an array of integers, every element appears three times except for ...
- 17.iOS App设置icon，启动图，App名称的方法
icon:选择Assets-->AppIcon-->将各种尺寸的icon拖拽到相应的框中. APP名称:选择info-->Bundle name,修改APP名字. 启动图: 首先点击 ...
- CSS有三种基本的定位机制
CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 ...
- easyUI的formatter使用
<table class="easyui-datagrid" style="width:400px;height:250px" data-options= ...
- 解决php中json_decode的异常JSON_ERROR_CTRL_CHAR
该字符中含了ASCII码ETB控制符,即\x17导致json解析失败 (截图中显示ETB是因为用了Sublime text2) 解决方法如下:去掉0-31的控制符再进行decode $result = ...
- String、StringBuffer、StringBuilder的一些小经验……
一说String.StringBuffer和StringBuilder,想必大家都很熟悉,这三者经常在我们的面试题中出现,我也是看到了关于这三个的经典面试题,才触动了我之前工作中的一些经历,故而根据我 ...