由于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. 适配ios10(iTunes找不到构建版本)

    前两天上架App遇到一个比较神奇的问题,打包好的项目使用Application Loader上传成功,但是在iTunes里面却找不到构建版本,App的活动页面也没有相应的版本. 之前了解IOS10对用 ...

  2. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  3. JQuery validate验证 自定义

    http://www.w3cschool.cc/jquery/jquery-plugin-validate.html http://blog.163.com/zhao_jinggui/blog/sta ...

  4. 如何解决.NET Framework4.0的System.EnterpriseServices could not found 的问题

    我今天建基于.NET Framework4.0的webSite时报错 “System.EnterpriseServices, Version=4.0.0.0, Culture=neutral, Pub ...

  5. Oracle 启动状态解说

    oracle 启动状态由nomount-mount-open 一. nomount状态下操作 08:09:49 idle> startup nomount; ORACLE instance st ...

  6. WCF入门(九)--WCF实例管理

    这组由Windows通讯基础(WCF)结合一组消息(客户端请求)服务实例所采用的技术被称为实例管理.一个完全由三种类型实例激活支持WCF,它们如下所述. 1.每个调用服务 每次调用服务是Windows ...

  7. SQL 查询条件放在LEFT OUTER JOIN 的ON语句后与放在WHERE中的区别

    这两种条件放置的位置不同很容易让人造成混淆,以致经常查询出莫名其妙的结果出来,特别是副本的条件与主表不匹配时,下面以A,B表为例简单说下我的理解. 首先要明白的是: 跟在ON 后面的条件是对参与左联接 ...

  8. ZOJ 3702 Gibonacci number

    本来已经关上电脑了 但还是想打开电脑纪念一下这充实的一天…… 第一节高数课讲新课级数 讲完一个知识点 想问问女票今天咋又没来上课…… 突然发现院长问我自费去不去省赛…… !!! 当然是去啊! ……虽然 ...

  9. 【bzoj1458】士兵占领

    Description 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里不能放置士兵.我们称这些士兵占领了整个棋盘当满足第i行至少放 ...

  10. [js插件开发教程]实现一个比较完整的开源级选项卡插件

    在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>>   [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...