详解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 相关文章推荐
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
原生js的数组除重复简单实例
May 24 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
解析原生JS getComputedStyle
May 25 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跨服务器访问方法小结
2015/05/12 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
js实现select下拉框选择
2020/01/11 Javascript
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
python中有函数重载吗
2020/05/28 Python
基于python实现查询ip地址来源
2020/06/02 Python
python开发入门——set的使用
2020/09/03 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
工商管理专业自荐信
2014/06/03 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书