详解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面向对象 多种创建对象方法小结
May 21 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
全面解析bootstrap格子布局
May 22 Javascript
Vue中使用vux的配置详解
May 05 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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二维数组的去重问题解析
2011/07/17 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
7个JS基础知识总结
2014/03/05 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python中__call__方法示例分析
2014/10/11 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python实现简单登录验证
2016/04/13 Python
Python中的TCP socket写法示例
2018/05/11 Python
替换python字典中的key值方法
2018/07/06 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
Unix里面如何在后台运行程序
2016/10/14 面试题
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
logback如何自定义日志存储
2021/08/30 Java/Android
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
如何优化vue打包文件过大
2022/04/13 Vue.js