javascript中attachEvent用法实例分析


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript中attachEvent用法。分享给大家供大家参考。具体分析如下:

一般我们在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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>attachEvent</title>
<script type="text/javascript">
//第一种方式(微软的私人方法)
function iniEvent() {
  var btn = document.getElementById("btn");
  btn.attachEvent("onclick", click1);
  btn.attachEvent("onclick", click2);
  btn.attachEvent("onclick", click3);
}
//第二种方式(火狐和其他浏览器)
function iniEvent2() {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", click1, false);
  btn.addEventListener("click", click2, false);
  btn.addEventListener("click", click3, false);
}
function click1() {
  alert('click1');
}
function click2() {
  alert('click2');
}
function click3() {
  alert('click3');
}
</script>
</head>
<body onload="iniEvent()">
<input type="button" id="btn" value="attachEvent" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 #Javascript
javascript清空table表格的方法
May 14 #Javascript
AngularJS的内置过滤器详解
May 14 #Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 #Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 #Javascript
javascript基于DOM实现权限选择实例分析
May 14 #Javascript
javascript中DOM复选框选择用法实例
May 14 #Javascript
You might like
在数据量大(超过10万)的情况下
2007/01/15 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
取得传值的函数
2006/10/27 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python 实现集合Set的示例
2020/12/21 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
学生干部培训方案
2014/06/12 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
写给导师的自荐信
2015/03/06 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS