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 ...
随机推荐
- 【原创】Odoo开发文档学习之：ORM API接口（ORM API）（边Google翻译边学习）
官方ORM API开发文档:https://www.odoo.com/documentation/10.0/reference/orm.html Recordsets(记录集) New in vers ...
- webUploader实现大文件分片，断点续传
问题: 公司现在的业务需求是要上传一个大文件,上一次写了一篇博客,做了一个简单的文件上传,支持单文件,大型文件上传 现在对之前的上传进行优化,支持断点续传,秒传功能 上次博客:[http://www. ...
- hadoop2.0(chd4) 通过API获取job信息
hadoop 版本儿:hadoop-2.0-cdh4.3.0 想做一个hive的命令的schedule,所以必须获取正在运行的job的数量. 到网上查了一通,一开始用了JobClient,怎么弄都是N ...
- R的数据读写
目录 1 简介 在使用任何一款数据分析软件的时候,首先要做的就是数据成功的读写问题,所以不同于其他文档的书写方法,本文将探讨如何读写本地文本文件. 2 运行环境 操作系统:Win10 R版本:R-3. ...
- 关于网易云验证码V1.0版本的服务介绍
服务介绍 易盾验证码是一个用于区分人和机器的通用验证码组件.传统的字符型验证码由于存在破解率高,用户体验不友好等问题,已不适用于现今的互联网环境.易盾验证码抛弃了传统字符型验证码展示-填写字符-比对答 ...
- XAF-属性编辑器中的EditMask,DisplayFormat格式化字符串该如何设置
XAF项目中有个DisplayFormat和EditMask设置,其中: 任何地方看到的DisplayFormat都是用于显示时,即非修改状态的编辑器,显示值的格式. EditMask是指编辑时的格式 ...
- async+await 让界面飞，让双手爽
.net 4.5已经发布很久了,但是一直也没有静下心来好好的研究微软给开发者带来的喜悦. 今天我将简单的介绍下 async + await 这对搭档的出现,如何让频繁假死的界面飞起来(其实只是不再阻塞 ...
- requests,unittest——多接口用例，以及需要先登录再发报的用例
之前写过最简单的接口测试用例,本次利用unittest进行用例管理,并出测试报告,前两个用例是两个不同网页的get用例,第三个是需要登录才能访问的网页A,并在其基础上访问一个需要在A页面点开链接才能访 ...
- HIVE简介及安装
一.简介 百度百科HIVE定义: hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运 ...
- 论文笔记：Fully-Convolutional Siamese Networks for Object Tracking
Fully-Convolutional Siamese Networks for Object Tracking 本文作者提出一个全卷积Siamese跟踪网络,该网络有两个分支,一个是上一帧的目标,一 ...