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.0return 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

转载于:https://www.cnblogs.com/carriezhao/p/7270335.html

js添加事件 attachEvent 和addEventListener的用法相关推荐

js 添加事件 attachEvent 和 addEventListener 的用法
一般我们在JS中添加事件,是这样子的 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.οnclick=method1; obj. ...
js 添加事件 attachEvent 和addEventListener 的用法
2019独角兽企业重金招聘Python工程师标准>>> 一般我们在JS中添加事件,是这样子的 1 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个 ...
js 添加事件 attachEvent 和 addEventListener 的区别
1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->met ...
js: 添加事件监听addEventListener、移除事件监听removeEventListener
文档 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener https://developer.m ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
JS添加事件和解绑事件：addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
js滚动条事件监听addEventListener、removeEventListener不生效
//移除监听需要满足需要移除的事件类型必须是一样的, 比如: click 需要从目标事件移除的 EventListener 函数必须和 addEventListener 中注册的是同一个, 也就是说 ...
JS事件汇总,addEventListener添加事件监听
JS事件汇总 JavaScript 事件 JS事件汇总鼠标事件键盘事件表单事件读取事件 onload与onpageshow事件区别其它事件 addEventListener()添加事件监听 ...

js添加事件 attachEvent 和addEventListener的用法

js添加事件 attachEvent 和addEventListener的用法相关推荐

最新文章

热门文章