js添加事件 attachEvent 和addEventListener的用法
一般我们在JS中添加事件,是这样子的:
obj.onclick = method
这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢???
obj.onclick = method1;
obj.onclick = method2;
obj.onclick = method3;
如果这样写,那么只有绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角该登场了,在IE中我们可以使用attachEvent方法
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
使用格式前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是method3 --> method2 --> method1
可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法
btn1Obj.addEventListener('click',method1,false);
btn1Obj.addEventListener('click',method2,false);
btn1Obj.addEventListener('click',method3,false);
执行顺序是method1 --> method2 --> method3,
作为前端开发工程师,最悲剧的莫过于浏览器的兼容问题,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏有前人帮我们做了这件事
<script>
function addEvent(elem,evType,fn,useCapture){
if (elem.addEventListener) {
elem.addEventListener(evType,fn,useCapture);//DOM 2.0
return true;
}else if(elem.attachEvent){
var r = elem.attachEvent('on'+evType,fn); //IE5+
return r;
}else{
elem['on'+evType] = fn; //DOM 0
}
}
</script>
转载:http://www.oschina.net/question/54100_25614
js添加事件 attachEvent 和addEventListener的用法的更多相关文章
- js 添加事件 attachEvent 和 addEventListener 的用法
一般我们在JS中添加事件,是这样子的 ? 1 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? ? 1 2 3 obj.onclick=m ...
- js 添加事件 attachEvent 和 addEventListener 的区别
1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->meth ...
- js中添加事件 attachEvent 与 addEventListener
给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...
- js添加事件通用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js添加事件监听的方式与this
js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...
- IE9 添加事件DOMContentLoaded,方法addEventListener
IE9 新添加 事件DOMContentLoaded,方法addEventListener
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件 var addEvent = function( obj, type, ...
随机推荐
- 一条SQL引起的雪崩
1.问题描述 MySQL服务器卡死,CPU飚到300%多,命令执行缓慢. 2.问题定位 踩了狗屎运,直接找到了问题缘由 发现了一条SQL写的模糊匹配,将%写在了关键字的前面,这样会造成查询不使用索引, ...
- BBS项目部署
1.准备 项目架构为:LNM+Python+Django+uwsgi+Redis (L:linux,N:nginx,M:mysql) 将bbs项目压缩上传到: /opt 在shell中直接拖拽 ...
- iOS版微信6.5.21发布 适配iPhone X
昨日,iOS版微信迎来v6.5.21正式版发布,本次升级主要适配iPhone X,在聊天中查找聊天内容时,可以查找交易消息.可以给聊天中的消息设置日期提醒.上一个正式版v6.5.16发布于9月13日, ...
- 深入浅出java IO模型
一.同步和异步 同步:一个事件或者任务的执行,会使整个流程暂时等待,也就是说如果有多个任务要执行,必须要逐个进行. 异步:一个事件或者任务的执行,不会使整个流程暂时等待,也就是说如果有多个任务要执行, ...
- C的指针疑惑:C和指针13(高级指针话题)
传递命令行参数 C程序的main函数具有两个形参.第一个通常称为argc,代表命令行参数的数目. 第二个通常称为argv,它指向一组参数值.由于参数的数目并没有内在的限制,所以argv指向这组参数值( ...
- 最长上升子序列算法(n^2 及 nlogn) (LIS) POJ2533Longest Ordered Subsequence
问题描述: 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的.对于给定的一个序列(a1, a2, ..., aN),我们可以得到一些上升的子序列 ...
- python全栈开发从入门到放弃之异常处理
1.try except num = input('num : ') #try在阶段中处理异常 try: f = open('file', 'w') int(num) except ValueErro ...
- 树莓派搭建Git服务器
目录 安装ssh 安装git-core 新增git用户 设置git用户目录 [服务端]设置git仓库 [客户端]设置git仓库 设置ssh登录 安装ssh sudo apt-get install s ...
- 阿里云ECS服务器磁盘挂载(转)
买了阿里云的ECS云服务器,本机赠送20GB的磁盘,感觉不够用,又买了一块500GB的磁盘,本文就是记录怎么把这500GB的磁盘挂载上. 检查现在磁盘情况 我们可以看到买的那个500GB的磁盘没有出现 ...
- HttpWebRequest 返回BadRequest(400) 同时返回Response
今天用Fiddler分析安卓APP的一个登陆功能的时候,账号和密码错误会返回相应的消息,并且状态码是400. 正常用法: /// <summary> /// 读取返回的内容 /// < ...