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 ...
随机推荐
- Nginx入门篇（三）之虚拟主机配置
一.虚拟主机概念 所谓虚拟主机,在Web服务当中就是一个独立的网站站点,这个站点对应独立的域名(也有可能是IP或者端口),具有独立的程序和资源目录,可以独立地对外提供服务供用户访问. 这个独立的站点在 ...
- 2019年猪年颁奖典礼、公司年会、跨年晚会、科技会议、年终答谢会之幕布背景展板PSD模板-第三部分
16套--2019年猪年颁奖典礼.公司年会.跨年晚会.科技会议.年终答谢会之幕布.背景和展板PSD模板,免费颁奖典礼PSD展板背景幕布,下载地址:百度网盘,https://pan.baidu.com/ ...
- WPF获取窗口句柄
通过WPF的互操作帮助类WindowInteropHelper,相关连接:https://msdn.microsoft.com/zh-cn/library/system.windows.interop ...
- 时序数据库InfluxDB
在系统服务部署过后,线上运行服务的稳定性是系统好坏的重要体现,监控系统状态至关重要,经过调研了解,时序数据库influxDB在此方面表现优异. influxDB介绍 时间序列数据是以时间字段为每行数据 ...
- scikit-learn 0.18中的cross_validation模块被移除
环境:scikit-learn 0.18 , python3 from sklearn.cross_validation import train_test_split from sklearn.gr ...
- [C++基础] tips
1. 在g++ 中使支持C++11 https://askubuntu.com/questions/773283/how-do-i-use-c11-with-g This you can do by ...
- asp.net的forms身份验证 单用户身份验证
asp.net的forms身份验证 单用户身份验证 首先要配置Web.config文件 <system.web> <authentication mode="Forms& ...
- Action Required: Listings Deactivated for Potential Pricing Error
Dear Seller, We are contacting you because we have detected potential pricing errors in your Amazon. ...
- Python坑系列：可变对象与不可变对象
在之前的文章 http://www.cnblogs.com/bitpeng/p/4748148.html 中,大家看到了ret.append(path) 和ret.append(path[:])的巨大 ...
- “Hello World！”团队第五周第一次会议
今天是我们团队“Hello World!”团队第五周召开的第一次会议,欢迎我们的新小伙伴刘耀泽同学.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.Todo List 六.会议 ...