由于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>

　　

这段js代码，运行结果是弹出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事件绑定使用方法的更多相关文章

  1. 【转】详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...

  2. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  3. 详解JavaScript数组过滤相同元素的5种方法

    详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm

  4. 百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

  5. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  6. 详解Javascript的继承实现（二）

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  7. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  8. js对象详解(JavaScript对象深度剖析，深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  9. 详解JavaScript的任务、微任务、队列以及代码执行顺序

    摘要: 理解JS的执行顺序. 作者:前端小智 原文:详解JavaScript的任务.微任务.队列以及代码执行顺序 思考下面 JavaScript 代码: console.log("scrip ...

随机推荐

  1. 从零开始单排学设计模式「UML类图」定级赛

    阅读本文大概需要 3.5 分钟. 本篇是设计模式系列的开篇,虽然之前也写过相应的文章,但是因为种种原因后来断掉了,而且发现之前写的内容也很渣,不够系统. 所以现在打算重写,加上距离现在也有一段时间了, ...

  2. 每天学点SpringCloud（四）：Feign的使用及自定义配置

    Feign:SpringCloud的官网对它的定义是这样的: 是一个声明式的Web服务客户端.它支持Feign本身的注解.JAX-RS注解以及SpringMVC的注解.Spring Cloud集成Ri ...

  3. 在linux系统上文件传输的小技巧

    各位做运维的小伙伴,你是不是常常在为文件传到linux服务器上感到头疼呢,我们知道常用的文件传输工具有好多,比如xftp,winscp等,但是有没有比这更简单的呢?当然是有的呢,下面给大家介绍下: y ...

  4. Source优化

    优化Source主要包括以下几方面: 1 优化sqlquery 在mapping中,通常会在Source Qualifier组件中使用sqlquery读取数据,则优化通常包括以下几点: 1)  如果在 ...

  5. deepin卸载mysql并安装设置mysql5.7

    mysql完全卸载以及安全安装 完全卸载 sudo apt purge mysql-* sudo rm -rf /etc/mysql/ /var/lib/mysql sudo apt autoremo ...

  6. 阿里启动新项目：Nacos，比 Eureka 更强！

    什么是 Nacos? Nacos 是阿里巴巴推出来的一个新开源项目,这是一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台. Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提 ...

  7. 如何配置React Native真机调试-iOS

    说在前面,本教程是建立在项目已经成功在模拟器上运行的基础上,如果你是还未配置好环境的新手,建议先从官网快速入门开始:官网英文版 . 中文版 ok, 切入正题,当你已经完成好环境配置,在模拟器上成功的运 ...

  8. DDD实战进阶第一波(十四)：开发一般业务的大健康行业直销系统（订单上下文应用服务用例与接口）

    上一篇文章我们主要讲了订单上下文的领域逻辑,在领域逻辑中完成了订单项的计算逻辑.订单的计算逻辑以及如何生成相应的实体code,这篇文章我们通过 在应用服务中实现一个下单的用例,来将这些领域逻辑以及仓储 ...

  9. SonarQube 集成 GitLabCI

    本文是用于分析SonarQube代码的质量,每次在GitLab上提交代码时都使用GitLab-CI运行器进行检查. 1.SonarQube with GitLab 安装插件GitLab-plugin ...

  10. Android--UI之Button

    前言 最近一直在讲androidUI控件的使用方式,这篇博客讲解一下基本上属于用处最广泛的控件之一的Button控件.如果有过其他平台开发经验的程序员,对按钮是不会陌生的.本篇博客首先讲解一下Andr ...