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

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

attachEvent和addEventListener区别的更多相关文章

  1. attachEvent和addEventListener区别总结

    1.attachEvent与addEventListener的区别 支持的浏览器不同.attachEvent在IE9以下的版本中受到支持.其它的都支持addEventListener. 参数不同.ad ...

  2. attachEvent与addEventListener的区别 真实例子

    转自:https://www.cnblogs.com/Rosefxd/p/4921330.html 近日遇到attachEvent与addEventListener两个事件,哟,果断研究一下~~ 先普 ...

  3. (转载)JS事件监听 JS:attachEvent和addEventListener使用方法

    (转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...

  4. JS事件监听 JS:attachEvent和addEventListener 使用方法

    attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListene ...

  5. attachEvent和addEventListener

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...

  6. js中添加事件 attachEvent 与 addEventListener

    给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...

  7. attachEvent与addEventlistener兼容性

    关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window有关问题   请点击下面回答中的"采纳为答案&quo ...

  8. JavaScript中的attachEvent和addEventListener

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...

  9. attachEvent 与 addEventListener 的监听

    说到 attachEvent 与 addEventListener 的事件必然会提到  浏览器的判断,因为attachEvent只适用于于IE 先来看看常用的浏览器的判断 //判断浏览器类型 if(n ...

随机推荐

  1. nexus安装实例

    Nexus安装 1.下载Nexus:[笔者版本nexus-2.11.2-03-bundle.tar.gz] 2. 安装nexus [root@localhost local]# pwd /usr/lo ...

  2. 更改chrome底色为护目色

    找到chrome目录:C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Def ...

  3. Android NDK 同时编译多个Module

    LOCAL_PATH := $(call my-dir) ## ## NDK 支持同时编译多个Module: ## 在配置的时候,每个Module需要 以 include $(CLEAR_VARS)开 ...

  4. ch6 影响 MySQLServer 性能的相关因素

    第6章影响 MySQLServer 性能的相关因素 前言: 大部分人都一致认为一个数据库应用系统(这里的数据库应用系统概指所有使用数据库的系统)的性能瓶颈最容易出现在数据的操作方面,而数据库应用系统的 ...

  5. 云计算相关的一些概念Baas、Saas、Iaas、Paas

    BaaS(后端即服务:Backend as a Service)公司为移动应用开发者提供整合云后端的边界服务. SaaS(软件即服务:Software as a Service)提供了完整的可直接使用 ...

  6. [转]一个小试验验证对象的指针计数置为nil的情况

    本文转载于新风作浪的博客专栏,博客地址:http://blog.csdn.net/duxinfeng2010/article/details/8757211 以下博客原文: 最近遇到这样一个问题,以前 ...

  7. URL 学习总结

    1.绝对路径(以"/"斜线开头的路径,代表相对于当前Web应用): a)地址给服务器用,web应用名称可以省略. 请求包含:request.getRequestDispatcher ...

  8. 在 sublime text 3 中添加 Emmet (ZenCoding)

    安装 Emmet 插件: 启动 Sublime Text 3,选择 Preferences>Package Control,点选 Package Control:Install Package: ...

  9. 一些值得学习和借鉴的.Net 开源项目

    1.DotNetFramework .NET Reference Source 发布了 beta 版,可以在线浏览 .NET Framework 4.5.1 的源代码,并且可以通过配置,在 Visua ...

  10. android SDK Manager 上载失败

    android SDK Manager 下载失败如题,利用android SDK Manager 无法下载各个版本的SDK,是最近无法连接上谷歌的服务器吗?我用了网上说的在C:\WINDOWS\sys ...