javascript打造跨浏览器事件处理机制[Blue-Dream出品]
需积分: 3 33 浏览量
2020-12-08
20:43:21
上传
评论
收藏 103KB PDF 举报
javascript打造跨浏览器事件处理机制打造跨浏览器事件处理机制[Blue-Dream出品出品]
使用类库可以比较容易的解决兼容性问题.但这背后的机理又是如何呢? 下面我们就一点点铺开来讲.
首先,DOM Level2为事件处理定义了两个函数addEventListener和removeEventListener, 这两个函数都来自于EventTarget接
口.
代码如下:
element.addEventListener(eventName, listener, useCapture);
element.removeEventListener(eventName, listener, useCapture);
EventTarget接口通常实现自Node或Window接口.也就是所谓的DOM元素.
那么比如window也就可以通过addEventListener来添加监听.
代码如下:
function loadHandler() {
console.log(‘the page is loaded!’);
}
window.addEventListener(‘load’, loadHandler, false);
移除监听通过removeEventListener同样很容易做到, 只要注意移除的句柄和添加的句柄引用自一个函数就可以了.
window.removeEventListener(‘load’, loadHandler, false);
如果我们活在完美世界.那么估计事件函数就此结束了.
但情况并非如此.由于IE独树一帜.通过MSDHTML DOM定义了attachEvent和detachEvent两个函数取代了addEventListener和
removeEventListener.
恰恰函数间又存在着很多的差异性,使整个事件机制变得异常复杂.
所以我们要做的事情其实就转移成了.处理IE浏览器和w3c标准之间对于事件处理的差异性.
在IE下添加监听和移除监听可以这样写
代码如下:
function loadHandler() {
alert(‘the page is loaded!’);
}
window.attachEvent(‘onload’, loadHandler); // 添加监听
window.detachEvent(‘onload’, loadHandler); // 移除监听
从表象看来,我们可以看出IE与w3c的两处差异:
1. 事件前面多了个”on”前缀.
2. 去除了useCapture第三个参数.
其实真正的差异远远不止这些.等我们后面会继续分析.那么对于现在这两处差异我们很容易就可以抽象出一个公用的函数
代码如下:
function addListener(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent(‘on’ + eventName, handler);
}
else {
element[‘on’ + eventName] = handler;
}
}
function removeListener(element, eventName, handler) {
if (element.addEventListener) {
element.removeEventListener(eventName, handler, false);
}
else if (element.detachEvent) {
element.detachEvent(‘on’ + eventName, handler);
}
else {
element[‘on’ + eventName] = null;
}
}
上面函数有两处需要注意一下就是:
1. 第一个分支最好先测定w3c标准. 因为IE也渐渐向标准靠近. 第二个分支监测IE.
2. 第三个分支是留给既不支持(add/remove)EventListener也不支持(attach/detach)Event的浏览器.
性能优化
对于上面的函数我们是运用”运行时”监测的.也就是每次绑定事件都需要进行分支监测.我们可以将其改为”运行前”就确定兼容函
评论0