由于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. Java 使用 int 数据计算百分比

    int diliverNum=3;//举例子的变量 int queryMailNum=9;//举例子的变量 // 创建一个数值格式化对象 NumberFormat numberFormat = Num ...

  2. 10. 面向holder编程、自动轮询

    没有看过上一篇文章的话,建议先去阅读GooglePlay:9.代码抽取(adapter) 项目框架的搭建: 以后每个view都是holder BaseHolder public abstract cl ...

  3. 吴恩达机器学习笔记41-支持向量机的优化目标（Optimization Objective of Support Vector Machines）

  4. Mybatis Cause: java.lang.ClassNotFoundException: Cannot find class:

    MyBatis原因:java.lang.ClassNotFoundException:找不到类. 原因你的xml文件中的返回类型错误,没有找到这个类. 检查类名是否正确,检查路径是否正确. 在复制my ...

  5. GNU 下命令objcopy 用法

    概念: 将目标文件的一部分或者全部内容拷贝到另外一个目标文件中,或者实现目标文件的格式转换. 常用转换: 1 把elf格式转成s19格式: objcopy --srec-len --srec-forc ...

  6. CSS3 Gradient 渐变还能这么玩

    浏览器支持两种类型的渐变:线性渐变 (linear-gradient),径向渐变 (radial-gradient) 渐变在 CSS 中属于一种 Image 类型,可以结合 background-im ...

  7. mongoose的基本操作方法

    mongoose 1. const mongoose = require("mongoose");导入mongoose模块 2. //注意url地址最后面的地址是数据库的名称    ...

  8. System.net.mail.smtpException;服务器提交了协议冲突 服务器响应为：

    最近发邮件遇到问题. 主机godaddy 端口 25,80 都可以用 stmp服务器地址:smtpout.secureserver.net 不支持ssl 我就吧 EnableSsl 设置为false了 ...

  9. mysql 导入 CSV文件命令行 ERROR 13 (HY000): Can't get stat of

    一定要查看好CSV字段结构是否和文件的表结构字段一致 load data local infile 'F:/MySqlData/test1.csv' --CSV文件存放路径 into table st ...

  10. mysql 开发进阶篇系列 47 物理备份与恢复(xtrabackup 的完全备份恢复，恢复后重启失败总结)

    一. 完全备份恢复说明 xtrabackup二进制文件有一个xtrabackup --copy-back选项,它将备份复制到服务器的datadir目录下.下面是通过 --target-dir 指定完全 ...