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的鼠标拖动效果代码
May 30 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
js实现自定义进度条效果
Mar 15 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php 无法载入mysql扩展
2010/03/12 PHP
PHP数据过滤的方法
2013/10/30 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
微信小程序实现商城倒计时
2020/11/01 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
jQuery实现增删改查
2020/12/22 jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python与C/C++的相互调用案例
2021/03/04 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
2014应届本科生自我评价
2014/09/13 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
承诺书范本大全
2015/05/04 职场文书
2015中学教学工作总结
2015/07/22 职场文书