前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >attachEvent和addEventListener区别

attachEvent和addEventListener区别

作者头像
书童小二
发布2018-09-03 18:56:42
8740
发布2018-09-03 18:56:42
举报
文章被收录于专栏:前端儿前端儿

一般来说,可以直接封装成这种形式:

var addEvent = function(element,type,handler){ 
            if(element.addEventListener){  //DOM2级
                element.addEventListener(type,handler,false); //false为冒泡,true为捕获
            }else if(element.attachEvent){  //IE
                element.attachEvent("on"+type,function(){  //默认皆为冒泡
                    handler.call(element);
                });
            }else{ 
                element["on"+type] = handler; //DOM0级
            }
        };

addEventListener的使用方式:主要是DOM2级

target.addEventListener(type, listener, useCapture);

target就是要注册事件的对象

type就是事件类型  比如“click"

listener就是监听的函数

useCapture就是是否使用捕获方式,false为冒泡,true为捕获

attachEvent使用方式:主要是IE中使用

target.attachEvent(type, listener);

type是事件类型,注意是这种形式:”onclick"

listener监听的函数

默认使用冒泡的方式

相应的,解除事件的方法:

removeEventListener(event,function,useCapture);

detachEvent(event,function);

那它们有什么不同呢?

举个例子:

document.getElementByIdx("btn").onclick = method1;
document.getElementByIdx("btn").onclick = method2;
document.getElementByIdx("btn").onclick = method3;
// 如果这样写,那么将会只有medhot3被执行

// 写成这样:
var btn1Obj = document.getElementByIdx("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
// 执行顺序为 method3->method2->method1

// 如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementByIdx("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
// 执行顺序为 method1->method2->method3
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-04-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档