由于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. 从构建分布式秒杀系统聊聊WebSocket推送通知

    秒杀架构到后期,我们采用了消息队列的形式实现抢购逻辑,那么之前抛出过这样一个问题:消息队列异步处理完每个用户请求后,如何通知给相应用户秒杀成功? 场景映射 首先,我们举一个生活中比较常见的例子:我们去 ...

  2. Kali学习笔记16：Nmap详细讲解

    在前面十五篇博客中,几乎每一篇都有介绍Nmap,这里系统地介绍下每个参数: 注意:区分每个参数的大小写 -iL:列好的IP放在一个文本里面,可以直接扫描这个文本 用法:namp -iL <文本名 ...

  3. Mybatis优缺点

    优点:SQL写在XML中,便于统一管理和优化 提供映射标签,支持对象和数据库的orm字段关系映射 可以对SQL进行优化      缺点: SQL工作量大 mybagtis移植姓不好 不支持级联

  4. slf4j日志门面担当

    一.简介 slf4j主要是为了给Java日志访问提供一个标准.规范的API框架,其主要意义在于提供接口,具体的实现可以交由其他日志框架,例如log4j和logback等.当然slf4j自己也提供了功能 ...

  5. Spring Cloud微服务中网关服务是如何实现的?（Zuul篇）

    导读 我们知道在基于Spring Cloud的微服务体系中,各个微服务除了在内部提供服务外,有些服务接口还需要直接提供给客户端,如Andirod.IOS.H5等等. 而一个很尴尬的境地是,如果直接将提 ...

  6. vue 关于数组和对象的更新

    在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 ...

  7. 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList的问题

    一.背景 最近闲来无事,想自己搭建一套Spring+SpringMVC+Mybatis+Mysql的环境(搭建步骤会在以后博客中给出),结果运行程序时,适用@ResponseBody注解进行返回Lis ...

  8. 【原创】驱动加载之StartService

    BOOL WINAPI StartService( _In_ SC_HANDLE hService, _In_ DWORD dwNumServiceArgs, _In_opt_ LPCTSTR *lp ...

  9. 基于FineUIMVC的代码生成器(传统三层)v1.0

    三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...

  10. 飞跃式发展的后现代 Python 世界

    飞跃式发展的后现代Python世界 如果现代Python有一个标志性特性,那么简单说来便是Python对自身定义的越来越模糊.在过去的几年的许多项目都极大拓展了Python,并重建了“Python”本 ...