本文介绍一些JavaScript事件绑定的常用方法及其优缺点，同时在最后展示一个由 Dean Edwards 写的一个比较完美的事件绑定方案。

传统方式

    element.onclick = function(e){// ...};

传统绑定的优点
- 非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
- 处理事件时，this关键字引用的是当前元素，这很有帮组
传统绑定的缺点
- 传统方法只会在事件冒泡中运行，而非捕获和冒泡
- 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
- 事件对象参数(e)仅非IE浏览器可用

W3C方式

    element.addEventListener('click', function(e){// ...}, false);

W3C绑定的优点
- 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
- 在事件处理函数内部，this关键字引用当前元素。
- 事件对象总是可以通过处理函数的第一个参数(e)捕获。
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
W3C绑定的缺点
- IE不支持，你必须使用IE的attachEvent函数替代。

IE方式

    element.attachEvent('onclick', function(){// ...});

IE方式的优点
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。
IE方式的缺点
- IE仅支持事件捕获的冒泡阶段
- 事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
- 事件对象仅存在与window.event参数中
- 事件必须以ontype的形式命名，比如，onclick而非click
- 仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

Dean Edwards的方案（addEvent/removeEvent库）

   function addEvent(elementment, type, handler) {// 为每个事件处理函数赋予一个独立的IDif(!handler.$$guid) handler.$$guid = addEvent.guid++;// 为元素建立一个事件类型的散列表if(!elementment.events) elementment.events = {};// 为每对元素/事件建立一个事件处理函数的散列表var handlers = elementment.events[type];if(!handlers) {handlers = elementment.events[type] = {};// 存储已有的事件处理函数(如果已存在一个)if(elementment["on" + type]) {handlers[0] = elementment["on" + type];}}// 在散列表中存储该事件函数handlers[handler.$$guid] = handler;// 赋予一个全局事件处理函数来出来所有工作elementment["on" + type] = handleEvent;}// 创建独立ID的计数器addEvent.guid = 1;function removeEvent(elementment, type, handler) {// 从散列表中删除事件处理函数if(elementment.events && elementment.events[type]) {delementte elementment.events[type][handler.$$guid];}}function handleEvent(event) {var returnValue = true;// 获取事件对象(IE使用全局的事件对象)event = event || fixEvent(window.event);// 获取事件处理函数散列表的引用var handlers = this.events[event.type];// 依次执行每个事件处理函数for(var i in handlers) {this.$$handerEvent = handlers[i];if(this.$$handlerEvent(event) === fasle) {returnValue = false;}}return returnValue;}// 增加一些IE事件对象缺乏的方法function fixEvent(event) {event.preventDefault = fixEvent.preventDefault;event.stopPropagation = fixEvent.stopPropagation;return event;}fixEvent.preventDefault = function() {this.returnValue = false;}fixEvent.stopPropagation = function() {this.cancelBubble = true;}

addEvent的优点
- 可以在所有浏览器中工作，就算是更古老无任何支持的浏览器
- this关键字可以在所有的绑定函数中使用，指向的是当前元素
- 中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数
- 不管浏览器类型，事件对象总是作为第一个对象传入
addEvent的缺点
- 仅工作在冒泡阶段（因为它深入使用事件绑定的传统方式）

JavaScript事件绑定相关推荐

addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
JavaScript事件绑定的方法说明收藏
JavaScript事件绑定的方法说明收藏事件使得客户端的 JavaScript 有机会被激活,并得以运行.在一个 Web 页面装载之后,运行脚本的唯一方式,就是响应系统或者用户的动作.虽然从第一 ...
简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
Javascript事件绑定的几种方式
Javascript事件绑定的几种方式来源:http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html 上篇文章讲到了事件绑定的3中 ...
JavaScript事件绑定，jQuery类库
文章目录 DOM操作(部分) JavaScript获取值操作属性操作事件绑定事件简介事件案例数据校验省市联动 jQuery框架简介 jQuery选择器查找标签之后的结果与js有何区别查 ...
Javascript事件绑定this
在FF中的事件绑定是使用addEventListener,其中函数中的this就是被绑定事件的元素:而在IE下的attachEvent函数中的this是指window. DRY:Don't Repe ...
javascript的事件绑定与事件委托
昨天有位web前端爱好者问关于javascript事件绑定和事件委托的知识,小编今天就来跟大家交流一下这个知识点! 事件绑定:事件是用户或者浏览器自身进行的特定的行为,这些事件都有自己特定的名字,如: ...
JavaScript解除事件绑定处理程序 js事件绑定解除
//参考 https://mp.csdn.net/postedit/90524536 JavaScript 事件绑定封装一个兼容性事件绑定方法应需求有时候事件绑定触发后就要接触事件. 解除事件绑定方 ...
事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
事件绑定 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...

JavaScript事件绑定

传统方式

W3C方式

IE方式

Dean Edwards的方案（addEvent/removeEvent库）

JavaScript事件绑定相关推荐

最新文章

热门文章