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程序设计有所帮助。
您可能感兴趣的文章:
- js event事件的传递与冒泡处理
- Nodejs实战心得之eventproxy模块控制并发
- JavaScript使用addEventListener添加事件监听用法实例
- JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
- Node.js事件循环（Event Loop）和线程池详解
- node.js中的events.emitter.once方法使用说明
- JS和JQ的event对象区别分析
- JavaScript运行机制之事件循环(Event Loop)详解
- js中的preventDefault与stopPropagation详解
- javascript Event对象详解及使用示例
- Javascript Event（事件）的传播与冒泡
相关文章
这篇文章主要为大家详细汇总了常用原生JS兼容性写法，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家介绍了一文详解GoJs中go.Panel的itemArray属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
获取select标签选中的值有很多方法，下面通过两种方式使用js来进行获取，喜欢的朋友可以参考下2014-01-01
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性，本文给大家介绍js的闭包,原型,和匿名函数之旅，感兴趣的朋友一起学习吧2015-10-10
这篇文章主要为大家详细介绍了微信小程序实现轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了js如何打开windows上的可执行文件,需要的朋友可以参考下2014-05-05
今天小编就为大家分享一篇layui form表单提交之后重新加载数据表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本文主要介绍了React+Typescript实现倒计时Hook的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Prototype是一个JavaScript框架，旨在简化动态Web应用程序的开发。原型被称为作为一个单一的文件分发的prototype.js，本文给大家介绍prototype框架，感兴趣的朋友一起学习吧2015-11-11
探索export导出一个字面量会报错export default不会报错
这篇文章主要为大家介绍了export导出一个字面量会报错而export default不会报错的问题探索解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
最新评论