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 ...
随机推荐
- 优步UBER司机全国各地奖励政策汇总：北京、上海、广州、深圳、佛山、天津、南京、武汉、成都、重庆、济南、西安、宁波、青岛、长沙、苏州
Uber当周奖励政策 当前奖励包括:高峰翻倍奖励.行程奖励.金牌司机奖励 获得任何奖励的前提条件: 当周评分高于4.7分,当周成单率高于45%,且当周完成至少5单(含5单) 滴滴快车单单2.5倍,注册 ...
- 【LOJ4632】[PKUSC2018]真实排名
[LOJ4632][PKUSC2018]真实排名 题面 终于有题面啦!!! 题目描述 小 C 是某知名比赛的组织者,该比赛一共有 \(n\) 名选手参加,每个选手的成绩是一个非负整数,定义一个选手的排 ...
- LVS入门篇（五）之LVS+Keepalived实战
一.实验架构和环境说明 (1)本次基于VMware Workstation搭建一个四台Linux(CentOS 7.4)系统所构成的一个服务器集群,其中两台负载均衡服务器(一台为主机,另一台为备机), ...
- R Language Learn Notes
One #install package install.packages("ggplot2") #load library library(ggplot2) #update.pa ...
- iframe ie低版本 横向滚动条的解决办法
吐槽下百度,在百度搜这个问题都是渣渣,谷歌直接就出来了,记录一下 设置Frame时,有一属性是scrolling="yes/no/auto",IE6的mozilla都支持,或许对a ...
- Windows网络通信(二)：socket异步编程
简述 这里使用的API和同步编程的API是差不多的,只多了一个ioctlsocket和select函数.这里面涉及一个很重要的结构体fd_set.这里用到的API大部分都是windows和linux通 ...
- Unity利用Share SDK实现QQ、微信及微博第三方登录及定制内容分享（附代码）
最近因为公司的项目需要添加一些实用性的功能,需要添加第三方登录及分享,采用的是Mob的SDK,可以先到其官网下载对应的SDK 点击这里,为了方便后期进行数据统计和分析,所以可以先添加一个应用,添加成功 ...
- Pycharm 2018.2.1-2018.1
请支持正版,谢谢! 下载激活包 激活包地址 解压后会得到两个包: JetbrainsCrack-2.10-release-enc.jar JetbrainsCrack-3.1-release-enc. ...
- Variable() placeholder() constant() 的区别
转载来自: http://www.studyai.com/article/33e22cef42274e8a
- Python 中的实用数据挖掘
本文是 2014 年 12 月我在布拉格经济大学做的名为‘ Python 数据科学’讲座的笔记.欢迎通过 @RadimRehurek 进行提问和评论. 本次讲座的目的是展示一些关于机器学习的高级概念. ...