详解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 Distilled 基础知识与函数
Apr 07 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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中进行身份认证
2006/10/09 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
学习Vue组件实例
2018/04/28 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
js实现点击生成随机div
2020/01/16 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
Python3实现飞机大战游戏
2020/04/24 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
高中生自我评语大全
2014/01/19 职场文书
创先争优演讲稿
2014/09/15 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
检讨书范文1000字
2015/01/28 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python