这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇浅谈 JavaScript 事件绑定的常用方法及其优缺点分析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
传统方式
- element.onclick = function(e){
- // ...
- };
1. 传统绑定的优点
非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致
处理事件时,this 关键字引用的是当前元素,这很有帮组
2. 传统绑定的缺点
传统方法只会在事件冒泡中运行,而非捕获和冒泡
一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
事件对象参数 (e) 仅非 IE 浏览器可用
W3C 方式
- element.addEventListener('click',
- function(e) {
- // ...
- },
- false);
1. W3C 绑定的优点
该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于 addEventListener 最后的参数设置:false (冒泡) 或 true (捕获)。
在事件处理函数内部,this 关键字引用当前元素。
事件对象总是可以通过处理函数的第一个参数 (e) 捕获。
可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件
2. W3C 绑定的缺点
IE 不支持,你必须使用 IE 的 attachEvent 函数替代。
IE 方式
- element.attachEvent('onclick', function(){
- // ...
- });
1. IE 方式的优点
可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件。
2. IE 方式的缺点
IE 仅支持事件捕获的冒泡阶段
事件监听函数内的 this 关键字指向了 window 对象,而不是当前元素(IE 的一个巨大缺点)
事件对象仅存在与 window.event 参数中
事件必须以 ontype 的形式命名,比如,onclick 而非 click
仅 IE 可用。你必须在非 IE 浏览器中使用 W3C 的 addEventListener
Dean Edwards 的方案(addEvent/removeEvent 库)
1. addEvent 的优点
可以在所有浏览器中工作,就算是更古老无任何支持的浏览器
this 关键字可以在所有的绑定函数中使用,指向的是当前元素
中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数
不管浏览器类型,事件对象总是作为第一个对象传入
2. addEvent 的缺点
仅工作在冒泡阶段(因为它深入使用事件绑定的传统方式)
以上就是小编为大家带来的浅谈 JavaScript 事件绑定的常用方法及其优缺点分析全部内容了,希望大家多多支持 phperz~
来源: http://www.phperz.com/article/17/0514/330753.html