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, ...
随机推荐
- PCI 设备详解二
上篇文章主要从硬件的角度分析了PCI设备的特性以及各种寄存器,那么本节就结合LInux源代码分析下内核中PCI设备的各种数据结构以及相互之间的联系和工作机制 2016-10-09 注:一下代码参考LI ...
- vim的快捷键
vim的快捷键 (〇)3中模式之间的切换 默认在命令模式. i键,从命令模式,进入插入模式. 冒号(:)键,从命令模式,进入末行模式. Esc键,从插入模式.末行模式,进入命令模式. (一)命令模式下 ...
- POJ 3171
题目大意: 给定一个区间范围[M,E],接下来有n行输入.每行输入三个数值:T1,T2,S,表示覆盖区间[T1,T2] 的代价为S,要求你求出覆盖区间[M,E]的最小代价,假设不能覆盖, ...
- 20165324《Java程序设计》第四周
学号 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 第五章:子类与继承 子类的定义:class 子类名 extends 父类名 { ... } 子类继承性: ...
- Mac Angular打包报错xcode-select: error: tool 'xcodebuild' requires Xcode
Mac Angular打包报错: Error: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer ...
- SQL Server创建事务——锁
参考地址:http://www.cnblogs.com/knowledgesea/p/3714417.html 事务定义: 事务是作为单个逻辑单元执行的一系列操作,它是一个不可分割的工作逻辑单元.它包 ...
- ionic简介
CordovaCordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎.提供了一组设备相关的API,通过这组API,移动应用能够以Java ...
- HDU - 2732 Leapin' Lizards (拆点最大流)
题意:有N*M的矩形,每个格点有一个柱子,每根柱子有高度c,允许蜥蜴经过这根柱子c次,开始有一些蜥蜴在某些柱子上,它们要跳出这个矩形,每步最大能跳d个单位,求最少有多少蜥蜴不能跳出这个矩形. 分析:转 ...
- 51nod 1391 01串(hash+DP)
题目链接题意:给定一个01串S,求出它的一个尽可能长的子串S[i..j],满足存在一个位置i<=x <=j, S[i..x]中0比1多,而S[x + 1..j]中1比0多.求满足条件的最长 ...
- 性能测试Loadrunner与Mysql
1.库文件下载地址:http://files.cnblogs.com/files/xiaoxitest/MySQL_LoadRunner_libraries.zip 分别库文件和代码添加到Loadru ...