首页 > web前端 > js教程 > 正文

浅谈JavaScript事件绑定的常用方法及其优缺点分析

高洛峰
发布: 2016-12-08 13:15:23
原创
2066人浏览过

传统方式  

element.onclick = function(e){
 
   // ...
 
 };
登录后复制

   

 1.  传统绑定的优点

非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致

立即学习Java免费学习笔记(深入)”;

处理事件时,this关键字引用的是当前元素,这很有帮组

2. 传统绑定的缺点

传统方法只会在事件冒泡中运行,而非捕获和冒泡

一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数

事件对象参数(e)仅非IE浏览器可用

W3C方式  

element.addEventListener('click', function(e){
 
   // ...
 
 }, false);
登录后复制

   

1. W3C绑定的优点

该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置:false (冒泡) 或 true (捕获)。

在事件处理函数内部,this关键字引用当前元素。

事件对象总是可以通过处理函数的第一个参数(e)捕获。

可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件

2. W3C绑定的缺点

IE不支持,你必须使用IE的attachEvent函数替代。

造点AI
造点AI

夸克 · 造点AI

造点AI 325
查看详情 造点AI

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的缺点

仅工作在冒泡阶段(因为它深入使用事件绑定的传统方式)

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号