浅谈JavaScript事件绑定的常用方法及其优缺点分析_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事件绑定的常用方法及其优缺点分析全部内容了,希望大家多多支持~

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
事件绑定
浅谈教学案的优缺点、微信小程序优缺点浅谈、javascript优缺点、javascript的优缺点、常用个人优缺点,以便于您获取更多的相关知识。

时间: 2024-11-02 18:54:56

浅谈JavaScript事件绑定的常用方法及其优缺点分析_javascript技巧的相关文章

浅谈JavaScript 执行环境、作用域及垃圾回收_javascript技巧

执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象. 全局执行环境是最外围的一个执行环境.根据JavaScript实现所在的宿主环境不同,表示执行环境的对象也不一样.在Web浏览器中,全局执行环境被认为是window对象.因此,所有的全局变量和函数都是作为window对象的属性和方法创建的. 变量对象:环境中定义的所有变量和函数都保存在这个对象中. 作用域链:当代码在一个环境中执行时,会创建变量对象的一个作用域链.作用域链的用途是保证对执行环

浅谈Javascript中的函数、this以及原型_javascript技巧

关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

浅谈JavaScript中变量和函数声明的提升_javascript技巧

现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

浅谈JavaScript中的this指针和引用知识_javascript技巧

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this指针在传统OO语言中,是在类中声明的,表示对象本身.在JavaScript中,this表示当前上下文,即调用者的引用 ********this永远指向的是(函数对象)的所有者 this和全局对象: var a = 1; function foo(){ var b = 2; console.log(this.a+b);//3 } foo();

浅谈Javascript中的12种DOM节点类型_javascript技巧

前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成. 属性 一般地,节点至少拥有nodeType.nodeName和nodeValue这三个基本属性. 节点类型不同,这三个属性的值也不相同 nodeType nodeType属性返回节点类型的常

浅谈javascript 函数表达式和函数声明的区别_javascript技巧

javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

浅谈JavaScript中面向对象的的深拷贝和浅拷贝_javascript技巧

理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;

浅谈JavaScript中的string拥有方法的原因_javascript技巧

引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

浅谈javascript事件取消和阻止冒泡

这篇文章主要介绍了浅谈javascript事件取消和阻止冒泡的方法和示例,有需要的小伙伴可以参考下.     取消默认操作 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作.不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果.下面的代码假设一个事件处理程