2019独角兽企业重金招聘Python工程师标准>>>

一般我们在JS中添加事件,是这样子的

1 obj.οnclick=method

这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

1 obj.οnclick=method1;
2 obj.οnclick=method2;
3 obj.οnclick=method3;

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法

1 //object.attachEvent(event,function);
2 btn1Obj.attachEvent("onclick",method1);
3 btn1Obj.attachEvent("onclick",method2);
4 btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

1 //element.addEventListener(type,listener,useCapture);
2 btn1Obj.addEventListener("click",method1,false);
3 btn1Obj.addEventListener("click",method2,false);
4 btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事

01 functionaddEvent(elm, evType, fn, useCapture) {
02 if(elm.addEventListener) {
03 elm.addEventListener(evType, fn, useCapture);//DOM2.0
04 returntrue;
05 }
06 elseif(elm.attachEvent) {
07 varr = elm.attachEvent(‘on‘ + evType, fn);//IE5+
08 returnr;
09 }
10 else{
11 elm['on'+ evType] = fn;//DOM 0
12 }
13 }

下面是Dean Edwards 的版本

01 functionaddEvent(element, type, handler) {
02 //为每一个事件处理函数分派一个唯一的ID
03 if(!handler.$$guid) handler.$$guid = addEvent.guid++;
04 //为元素的事件类型创建一个哈希表
05 if(!element.events) element.events = {};
06 //为每一个"元素/事件"对创建一个事件处理程序的哈希表
07 varhandlers = element.events[type];
08 if(!handlers) {
09 handlers = element.events[type] = {};
10 //存储存在的事件处理函数(如果有)
11 if(element["on"+ type]) {
12 handlers[0] = element["on"+ type];
13 }
14 }
15 //将事件处理函数存入哈希表
16 handlers[handler.$$guid] = handler;
17 //指派一个全局的事件处理函数来做所有的工作
18 element["on"+ type] = handleEvent;
19 };
20 //用来创建唯一的ID的计数器
21 addEvent.guid = 1;
22 functionremoveEvent(element, type, handler) {
23 //从哈希表中删除事件处理函数
24 if(element.events && element.events[type]) {
25 deleteelement.events[type][handler.$$guid];
26 }
27 };
28 functionhandleEvent(event) {
29 varreturnValue =true;
30 //抓获事件对象(IE使用全局事件对象)
31 event = event || fixEvent(window.event);
32 //取得事件处理函数的哈希表的引用
33 varhandlers =this.events[event.type];
34 //执行每一个处理函数
35 for(variinhandlers) {
36 this.$$handleEvent = handlers[i];
37 if(this.$$handleEvent(event) ===false) {
38 returnValue =false;
39 }
40 }
41 returnreturnValue;
42 };
43 //为IE的事件对象添加一些“缺失的”函数
44 functionfixEvent(event) {
45 //添加标准的W3C方法
46 event.preventDefault = fixEvent.preventDefault;
47 event.stopPropagation = fixEvent.stopPropagation;
48 returnevent;
49 };
50 fixEvent.preventDefault =function() {
51 this.returnValue =false;
52 };
53 fixEvent.stopPropagation =function() {
54 this.cancelBubble =true;
55 };

功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。

最后贡献一个HTML5工作组的版本：

01 varaddEvent=(function(){
02 if(document.addEventListener){
03 returnfunction(el,type,fn){
04 if(el.length){
05 for(vari=0;i<el.length;i++){
06 addEvent(el[i],type,fn);
07 }
08 }else{
09 el.addEventListener(type,fn,false);
10 }
11 };
12 }else{
13 returnfunction(el,type,fn){
14 if(el.length){
15 for(vari=0;i<el.length;i++){
16 addEvent(el[i],type,fn);
17 }
18 }else{
19 el.attachEvent(‘on‘+type,function(){
20 returnfn.call(el,window.event);
21 });
22 }
23 };
24 }
25 })();

可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的

转载于:https://my.oschina.net/u/1404058/blog/184702

js 添加事件 attachEvent 和addEventListener 的用法相关推荐

  1. js 添加事件 attachEvent 和 addEventListener 的用法

    一般我们在JS中添加事件,是这样子的 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.οnclick=method1; obj. ...

  2. js添加事件 attachEvent 和addEventListener的用法

    一般我们在JS中添加事件,是这样子的: obj.onclick = method 这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢??? obj.onclick = meth ...

  3. js 添加事件 attachEvent 和 addEventListener 的区别

    1.addEventListener  适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->met ...

  4. js: 添加事件监听addEventListener、移除事件监听removeEventListener

    文档 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener https://developer.m ...

  5. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...

    js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01    var addEvent = ...

  6. JS添加事件和解绑事件：addEventListener()与removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

  7. js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法 监听事件函数...

    1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window.   .οnlοad=f ...

  8. js滚动条事件监听addEventListener、removeEventListener不生效

    //移除监听需要满足 需要移除的事件类型必须是一样的, 比如: click 需要从目标事件移除的 EventListener 函数必须和 addEventListener 中注册的是同一个, 也就是说 ...

  9. JS事件汇总,addEventListener添加事件监听

    JS事件汇总 JavaScript 事件 JS事件汇总 鼠标事件 键盘事件 表单事件 读取事件 onload与onpageshow事件区别 其它事件 addEventListener()添加事件监听 ...

最新文章

  1. EA+svn实现UML的版本号控制
  2. 全屏背景：15个jQuery插件实现全屏背景图像或媒体
  3. UItabelView头部视图;
  4. lammps后处理：ovito选择原子高级技巧讲解
  5. 2018华为网络技术大赛失败纪念
  6. SI4463的数据冲撞解决办法
  7. digester java_java digester
  8. LVS+Keepalived+Nginx+Tomcat高可用负载均衡集群配置
  9. 计算机怎么格式化硬盘,电脑格式化硬盘 电脑格式化硬盘要怎么操作
  10. GMap.NET 使用教程【1】
  11. Typescript系列(一)：TS入门教程之简介、安装、编译、监听
  12. 嵌入式基础学习-U-Boot使用
  13. 计算机组成原理-入门篇-01冯·诺依曼体系结构
  14. ubuntu搭建MNN环境
  15. 练习2-4：重新编写函数squeeze(s1,s2),将字符串s1中的任何字符与字符串时s2中的字符匹配的字符都删除
  16. 同济大学计算机何良华,信息与机电工程学院青年博士教师联谊会成立
  17. 开始使用linggle
  18. 运用String.format格式化方法和消息枚举类型创建消息模板
  19. 无盘网吧服务器能带30台机吗,30台机无盘网吧的配置方案
  20. 全自动安装的XP补丁包

热门文章

  1. solaris系统中的’format’程序
  2. linux(Centos5.1)升级至2.6.19内核+L7实现-- 续限P2P软件
  3. OpenSSF 获1000万美元投资，提升开源软件和软件供应链安全
  4. 一年太久，研究员决定不等补丁直接披露 Safari 0day 详情
  5. 白天做安全，晚上去挖洞
  6. 11.29晚 心情 晴 既然选择了Linux这条路就要坚持走下去
  7. jQuery对象与DOM对象之间的转换方法
  8. 老漏洞easy击：CVE-2012 0158占顶！
  9. HTML5 从0开始 写连连看 第一集. 背景图 表格绘制
  10. 《Single Image Haze Removal Using Dark Channel Prior》一文中图像去雾算法的原理、实现、效果及其他。...