attachEvent和addEventListener区别
一般来说,可以直接封装成这种形式:
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区别的更多相关文章
- attachEvent和addEventListener区别总结
1.attachEvent与addEventListener的区别 支持的浏览器不同.attachEvent在IE9以下的版本中受到支持.其它的都支持addEventListener. 参数不同.ad ...
- attachEvent与addEventListener的区别 真实例子
转自:https://www.cnblogs.com/Rosefxd/p/4921330.html 近日遇到attachEvent与addEventListener两个事件,哟,果断研究一下~~ 先普 ...
- (转载)JS事件监听 JS:attachEvent和addEventListener使用方法
(转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...
- JS事件监听 JS:attachEvent和addEventListener 使用方法
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法 按钮onclickaddEventListene ...
- attachEvent和addEventListener
attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...
- js中添加事件 attachEvent 与 addEventListener
给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...
- attachEvent与addEventlistener兼容性
关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window有关问题 请点击下面回答中的"采纳为答案&quo ...
- JavaScript中的attachEvent和addEventListener
attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...
- attachEvent 与 addEventListener 的监听
说到 attachEvent 与 addEventListener 的事件必然会提到 浏览器的判断,因为attachEvent只适用于于IE 先来看看常用的浏览器的判断 //判断浏览器类型 if(n ...
随机推荐
- nexus安装实例
Nexus安装 1.下载Nexus:[笔者版本nexus-2.11.2-03-bundle.tar.gz] 2. 安装nexus [root@localhost local]# pwd /usr/lo ...
- 更改chrome底色为护目色
找到chrome目录:C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Def ...
- Android NDK 同时编译多个Module
LOCAL_PATH := $(call my-dir) ## ## NDK 支持同时编译多个Module: ## 在配置的时候,每个Module需要 以 include $(CLEAR_VARS)开 ...
- ch6 影响 MySQLServer 性能的相关因素
第6章影响 MySQLServer 性能的相关因素 前言: 大部分人都一致认为一个数据库应用系统(这里的数据库应用系统概指所有使用数据库的系统)的性能瓶颈最容易出现在数据的操作方面,而数据库应用系统的 ...
- 云计算相关的一些概念Baas、Saas、Iaas、Paas
BaaS(后端即服务:Backend as a Service)公司为移动应用开发者提供整合云后端的边界服务. SaaS(软件即服务:Software as a Service)提供了完整的可直接使用 ...
- [转]一个小试验验证对象的指针计数置为nil的情况
本文转载于新风作浪的博客专栏,博客地址:http://blog.csdn.net/duxinfeng2010/article/details/8757211 以下博客原文: 最近遇到这样一个问题,以前 ...
- URL 学习总结
1.绝对路径(以"/"斜线开头的路径,代表相对于当前Web应用): a)地址给服务器用,web应用名称可以省略. 请求包含:request.getRequestDispatcher ...
- 在 sublime text 3 中添加 Emmet (ZenCoding)
安装 Emmet 插件: 启动 Sublime Text 3,选择 Preferences>Package Control,点选 Package Control:Install Package: ...
- 一些值得学习和借鉴的.Net 开源项目
1.DotNetFramework .NET Reference Source 发布了 beta 版,可以在线浏览 .NET Framework 4.5.1 的源代码,并且可以通过配置,在 Visua ...
- android SDK Manager 上载失败
android SDK Manager 下载失败如题,利用android SDK Manager 无法下载各个版本的SDK,是最近无法连接上谷歌的服务器吗?我用了网上说的在C:\WINDOWS\sys ...