详解javascript事件绑定使用方法


Posted in Javascript onOctober 20, 2016

由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误。如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了。

IE方式
attachEvent(事件名称, 函数),绑定事件处理函数
detachEvent(事件名称, 函数),解除绑定

DOM方式
addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<script> 
window.onload=function () 
{ 
  var oBtn=document.getElementById('btn1'); 
  oBtn.onclick=function () 
  { 
    alert('a'); 
  }; 
   
  oBtn.onclick=function () 
  { 
    alert('b'); 
  }; 
}; 
</script> 
</head> 
<body> 
<input id="btn1" type="button" value="按钮" /> 
</body> 
</html>

这段代码,运行结果是弹出b,因为有两个oBtn的点击事件,但是只执行了最后一个,这时候就体现出事件绑定的重要性了。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<script> 
window.onload=function () 
{ 
  var oBtn=document.getElementById('btn1'); 
  //IE浏览器 
  if(oBtn.attachEvent) 
  { 
    oBtn.attachEvent('onclick', function () 
    { 
      alert('a'); 
    }); 
    oBtn.attachEvent('onclick', function () 
    { 
      alert('b'); 
    }); 
  } 
  //其他浏览器 
  else 
  { 
    oBtn.addEventListener('click', function () 
    { 
      alert('a'); 
    }, false); 
    oBtn.addEventListener('click', function () 
    { 
      alert('b'); 
    }, false); 
  } 
   
}; 
</script> 
</head> 
<body> 
<input id="btn1" type="button" value="按钮" /> 
</body> 
</html>

当你使用事件绑定的时候,那么两次点击事件都会执行,只是执行顺序在不同浏览器是不同的。在IE中是自下而上执行,而在其他浏览器中是自上而下,不过由于alert的特殊性我们可以看出差别,其他语句基本等同于没有差别,但是在对于一些对时间要求严格是事件的使用时还是需要注意的,比如之前有一篇文章图片轮播中的setInterval对时间的细微的差别最后导致滚动混乱。 基于原生javascript的图片轮播domo

最后将我们的代码整理成函数,便于之后的使用

function myAddEvent(obj, ev, fn) 
{ 
  if(obj.attachEvent) 
  { 
    obj.attachEvent('on'+ev, fn); 
  } 
  else 
  { 
    obj.addEventListener(ev, fn, false); 
  } 
}

这时候如果需要使用多个window.onload事件其实就和使用多个oBtn.onclick事件差不多了。如下调用函数即可。

myAddEvent(window,'load',function () 
{ 
  alert('a'); 
}); 
myAddEvent(window,'load',function () 
{ 
  alert('b');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
angular源码学习第一篇 setupModuleLoader方法
Oct 20 #Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 #Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 #Javascript
yarn与npm的命令行小结
Oct 20 #Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 #Javascript
Javascript的动态增加类的实现方法
Oct 20 #Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 #Javascript
You might like
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Django中使用Celery的教程详解
2018/08/24 Python
django 消息框架 message使用详解
2019/07/22 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
小学教师自我鉴定
2013/11/07 职场文书
应届生新闻编辑求职信
2013/11/19 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
思想品德课教学反思
2014/02/10 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
建设工地安全标语
2014/06/07 职场文书
小学生春游活动方案
2014/08/20 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2014年网管工作总结
2014/12/11 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL