javascript中attachEvent用法实例分析

更新时间：2015年05月14日 16:19:22 作者：永远爱好写程序

这篇文章主要介绍了javascript中attachEvent用法,实例分析了javascript中事件绑定的相关技巧,需要的朋友可以参考下

本文实例讲述了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实现LRU算法的示例详解
不知道屏幕前的朋友们，有没有和我一样，觉得LRU算法原理很容易理解，实现起来却很复杂。所以本文就为大家整理了一下实现的示例代码，需要的可以参考一下
2023-04-04
javascript中如何判断类型汇总
这篇文章主要给大家介绍了关于javascript中如何判断类型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
JavaScript 中调用 Kotlin 方法实例详解
这篇文章主要介绍了JavaScript 中调用 Kotlin 方法实例详解的相关资料,需要的朋友可以参考下
2017-06-06
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
本文给大家js遍历数组和遍历对象的区别，一般来说for用来遍历数组对象而for-in用来遍历非数组对象。接下来小编给大家带来了js遍历数组和对象的区别及js递归遍历对象、数组、属性的方法详解，一起看下吧
2016-06-06
js手写贪吃蛇游戏实例源码
这篇文章主要给大家介绍了关于js手写贪吃蛇游戏的相关资料,贪吃蛇游戏是一款经典的游戏,在很多平台上都有出现,文中给出了详细源代码,需要的朋友可以参考下
2023-09-09
如何使用JavaScript实现栈与队列
这篇文章主要介绍了如何使用JavaScript实现栈与队列。栈和队列是web开发中最常用的两种数据结构。绝大多数用户，甚至包括web开发人员，都不知道这个惊人的事实。,需要的朋友可以参考下
2019-06-06
javascript实现文字无缝滚动
这篇文章主要介绍了javascript实现文字无缝滚动，文字可以实现上下滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
基于javascript实现移动端轮播图效果
这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
JS实现即点即编辑功能代码
以前在网上都看到过类似的功能，不过没自己想要实现过，这次刚好做静态页面中有这样的一个需求，就试着自己做做看，做完发现也不是什么很难的事情。
2008-10-10
继续学习javascript闭包
这篇文章主要还是继续学习javascript闭包，理解JavaScript的闭包是迈向高级JS程序员的必经之路，需要的朋友可以参考下
2015-12-12