addEventListener和attachEvent区别
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> </style>
</head>
<body>
<button id="myBtn">点击</button>
<p id="demo"></p>
<script type="text/javascript">
var E = {
/***
* 在主流浏览器中
* element.addEventListener(type, fn, false);
* @param element 文档节点 document window XMLHttpRequest
* @param type 字符串,事件名称,不含"on~", 比如"click", "mousemove", "keydown"
* @param useCapture 是否使用捕捉，一般用 false.
* 在低版本的IE浏览器中
* element.attachEvent("onclick", fn);
* @param type 字符串,事件名称,含"on~",比如"onclick", "onmousemove", "onkeydown"
* @param fn 实现了EventListener接口或者是JavaScript中的函数
*/
add: function (element, type, fn) {
if(element.addEventListener){
element.addEventListener(type, fn, false);//第三个参数默认值为false,所以如果不写其值默认为false
}else if(window.attachEvent){
element.attachEvent("onclick", fn);
}
}
};
var element = document.getElementById("myBtn");
function showText(){
document.getElementById("demo").innerHTML = "你点击了这个按钮!";
}
E.add(element, 'click', showText);
</script>
</body>
</html>
addEventListener和attachEvent区别的更多相关文章
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- addEventListener与attachEvent区别
DOM2级事件处理程序 DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作: addEventListener removeEventListener 所有的DOM节点都包含这两个方法, ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- Javascript添加事件的addEventListener()及attachEvent()区别分析，事件委托
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- ie和火狐事件addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- Javascript 的addEventListener()及attachEvent()区别分析
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这 ...
- addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
随机推荐
- struts2官方 中文教程 系列四：Action
先贴个本帖的地址,免得其它网站被爬去了struts2教程 官方系列四:Action 即 http://www.cnblogs.com/linghaoxinpian/p/6905521.html 下载 ...
- PHPStrom 里修改Emmet对php的自动扩展
PHPStrom 7.1.3 Emmet 想必大家都比较清楚了.Emmet有个特点,对于匹配不到的符号,仍然会自动扩展为标签的形式,比如我输入aaaa,然后按tab,会自动扩展为<aaaa> ...
- 随身Wifi+win7 搭建http代理 域名劫持 抓包 内容篡改实验环境
需求来源: 1.平板或手机是个封闭系统无法给wifi设置代理 2.需要利用filllder进行抓包,内容篡改等实验 拥有硬件资源:PC机器 + 小米随身wifi 方案1: NtBind Dns + N ...
- 【springmvc+mybatis项目实战】杰信商贸-6.重点知识回顾
1.重点知识回顾 Maven1)覆盖仓库文件,实际企业开发,公司会架一个测试服务器,在测试服务器中架私服.我们开发人员的程序,都连接私服.当本地没有项目中要使用的jar,Myeclipse maven ...
- 天马行空-Ops平台建设概述
1 概述 什么是Ops平台,Ops平台的目标是什么,建设的考虑点有哪些?本章节以实际生活中医院的例子来进行各形象的阐述. 医院包含各种诊断治疗设备,病历库,医生.一个孕妇需要到医院 ...
- 亚马逊首次推出卖家APP 可掌握商品盈利状况
美国零售巨头亚马逊近日首次对外发布了第一款针对卖家和商户的客户端,帮助他们更加高效的管理商品和销售数据. 据美国科技新闻网站 Mashable 报道,之前亚马逊在商户移动客户端方面一直空缺,许多商户不 ...
- Linux学习——echo和read命令用法
转载自http://www.runoob.com/linux/linux-comm-read.html http://www.178linux.com/76331 echo命令 本文列举了echo命令 ...
- 第九周个人PSP
11.10--11.16本周例行报告 1.PSP(personal software process )个人软件过程. C(类别) C(内容) ST(开始时间) ET(结束时间) INT(间隔时间) ...
- java 中的 i=i++
记得大学刚开始学C语言时,老师就说:自增有两种形式,分别是i++和++i,i++表示的是先赋值后加1,++i是先加1后赋值,这样理解了很多年也没出现问题,直到遇到如下代码,我才怀疑我的理解是不是错了: ...
- RAR和ZIP:压缩大战真相 (挺赞值得了解)
前言--王者归来? 等待足足两年之久,压缩霸主WinZip终于在万众期待下发布了9.0正式版.全世界自然一片沸腾,在世界各大知名下载网站中,WinZip9.0再次带起下载狂潮.然而此时国内并没有王者回 ...