attachEvent 与 addEventListener的使用
attachEvent与addEventListener区别
适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法 按钮onclick
addEventListener方法 按钮click
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3
使用实例:
1.var el = EDITFORM_DOCUMENT.body;
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2. if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}
//简单示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS</title>
</head>
<body>
<input id="para" type="text" />
<script type="text/javascript">
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
var element = document.getElementById("para");
if(element.addEventListener){ // firefox , w3c
element.addEventListener("focus",test,false);
element.addEventListener("focus",pig,false);
} else { // ie
element.attachEvent("onfocus",test);
element.attachEvent("onfocus",pig);
}
}
</script>
</body>
</html>
attachEvent 与 addEventListener的使用相关推荐
- attachEvent 与addEventListener到底有什么区别呢?
2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...
- 原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题 参考文章: (1)原生js的attachEvent和addEventLis ...
- JS:attachEvent和addEventListener方法
<SCRIPT LANGUAGE="JavaScript"> <!-- /**************************************** ...
- js 添加事件 attachEvent 和 addEventListener 的用法
一般我们在JS中添加事件,是这样子的 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.οnclick=method1; obj. ...
- js 添加事件 attachEvent 和 addEventListener 的区别
1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->met ...
- js添加事件 attachEvent 和addEventListener的用法
一般我们在JS中添加事件,是这样子的: obj.onclick = method 这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢??? obj.onclick = meth ...
- js 添加事件 attachEvent 和addEventListener 的用法
2019独角兽企业重金招聘Python工程师标准>>> 一般我们在JS中添加事件,是这样子的 1 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个 ...
- 读书笔记:编写高质量代码--web前端开发修炼之道(二:5章)
读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
- 从jQuery的缓存到事件监听
很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery********* ...
最新文章
- 本地打包Docker镜像上传至阿里云远程仓库(一站式脚本)
- PHP5.5.13 + Apache2.4.7安装配置流程详解
- Openstack 小知识点
- Goland实现Set操作
- oss导出数据为空时怎么处理_数据库导出时有空表导不出的解决方法
- 索引文件核心头文件定义
- 聊聊工业界做机器学习的里程碑
- java中什么泛型_【原创】java中的泛型是什么,有什么作用
- three.js 一个页面可以存在多个render吗_你确定把Spring MVC的视图机制吃透了吗?...
- LPS在无人机数据处理中的应用
- react重新渲染菜单_React实现递归组件
- MATLAB求图片两圆圆心,求助:如何求此图中两圆的圆心距?
- 笔记 | 《机器学习》中计算学习理论(上)
- VS2008开发Silverlight程序用到的插件
- 47. 避免产生直写型(write-only)的代码
- 汽车销售管理系统 c语言版 课程设计,《汽车销售管理系统 C语言版》.doc
- SDL游戏之路(十一)--按钮制作
- 弘辽电商专题三:打赢店铺翻身仗,提升淘宝权重很重
- 《Loy解说Eureka服务端源码(二)》
- oracle 常见报错
热门文章
- 2016年5月心情吧 233
- mysql 乱码处理
- symbian使用活动对象时返回-2147483647错误值的解决办法
- Linux下PCI设备驱动程序开发[转]
- Spring boot、Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm调优
- for和select循环语句的应用实践
- opencart配置United States Postal Service快递
- 中国电信到美国的几条海缆线路图
- Sdut 2416 Fruit Ninja II(山东省第三届ACM省赛 J 题)(解析几何)
- windows server 2008配置之AD域服务器 1