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 ...
随机推荐
- spring源码-aop增强-5.2
一.aop增强就是针对于不同的切面进行的相关增强,目的当然是更好的支持相关应用和解耦. 二.默认的aop增强类有AspectJMethodBeforeAdvice.AspectJMethodBefor ...
- Azkaban 工作流调度器
Azkaban 工作流调度器 1 概述 1.1 为什么需要工作流调度系统 a)一个完整的数据分析系统通常都是由大量任务单元组成,shell脚本程序,java程序,mapreduce程序.hive脚本等 ...
- HttpClient使用详解 (一)
Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们再讨论),它不仅是客户端发送Http请求变得容易,而且 ...
- Linux 安装Zookeeper<集群版>(使用Mac远程访问)
阅读本文需要先阅读安装Zookeeper<准备> 一 架构细节 zookeeper集群根据投票选举的机制 选出leader和follower zookeeper集群节点建议是奇数 这里我准 ...
- hadoop 基础入门
启动: 格式化节点:bin/hdfs namenode -format 全部启动:sbin/start-dfs:datanode.namenode sbi ...
- 7个Node.js的Web框架
NodeJS也就是Node,是众所周知的使用javascript构建Web应用框架,它启动一个服务器非常简单,如下: var http = require('http'); http.createSe ...
- 用js两张图片合并成一张图片
JS和canvas的合成方式 function drawAndShareImage(){ var canvas = document.createElement("canvas") ...
- phpquery 学习笔记
phpQuery是一个基于PHP的服务端开源项目,它可以让PHP开发人员轻松处理DOM文档内容,比如获取某新闻网站的头条信息.更有意思的是,它采用了jQuery的思想,你可以像使用jQuery一样处理 ...
- 【算法设计与数据结构】为何程序员喜欢将INF设置为0x3f3f3f3f？(转)
摘自https://blog.csdn.net/jiange_zh/article/details/50198097 在算法竞赛中,我们常常需要用到一个“无穷大”的值,对于我来说,大多数时间我会根据具 ...
- 过山车 HDU 2063 (二分图匹配裸题)
Problem Description RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找个个男生 ...