javascript attachEvent和addEventListener使用方法


Posted in Javascript onMarch 19, 2009

attachEvent方法 按钮onclick
addEventListener方法 按钮click
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例:
Java代码

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行
写成这样:
Java代码:
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
Java代码:
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。 Java代码:
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。 Java代码:
if (window.addEventListener){ 
window.addEventListener('load', _uCO, false); 
} else if (window.attachEvent){ 
window.attachEvent('onload', _uCO); 
}
Javascript 相关文章推荐
javascript 特性检测并非浏览器检测
Jan 15 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
理解javascript异步编程
Jan 27 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
js实现九宫格布局效果
May 28 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 #Javascript
js no-repeat写法 背景不重复
Mar 18 #Javascript
javascript 避免闭包引发的问题
Mar 17 #Javascript
用JavaScript编写COM组件的步骤
Mar 17 #Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 #Javascript
InnerHtml和InnerText的区别分析
Mar 13 #Javascript
JavaScript 快捷键设置实现代码
Mar 13 #Javascript
You might like
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
封装好的省市地区联动控件附下载
2007/08/13 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python3.5运算符操作实例详解
2019/04/25 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
解析python实现Lasso回归
2019/09/11 Python
python根据文本生成词云图代码实例
2019/11/15 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
python与js主要区别点总结
2020/09/13 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
《草原》教学反思
2014/02/15 职场文书
小学生综合素质评语
2014/04/23 职场文书
高三物理教学反思
2016/02/20 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL