详解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 相关文章推荐
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
详细分析单线程JS执行问题
Nov 22 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
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文件操作的详解
2013/06/05 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
php json转换相关知识(小结)
2018/12/21 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
100行python代码实现跳一跳辅助程序
2018/01/15 Python
高效使用Python字典的清单
2018/04/04 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Python多进程fork()函数详解
2019/02/22 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
.net面试题
2016/09/17 面试题
出纳岗位职责模板
2013/11/27 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
经典演讲稿范文
2013/12/30 职场文书
商业门面租房协议书
2014/11/25 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis