详解javascript事件绑定使用方法
由于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事件绑定使用方法的更多相关文章
- 【转】详解JavaScript中的异常处理方法
有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...
- JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
- 详解JavaScript数组过滤相同元素的5种方法
详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm
- 百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：
原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...
- 详解javascript中的this对象
详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...
- 详解Javascript的继承实现（二）
上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...
- 【转】详解JavaScript中的this
ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...
- js对象详解(JavaScript对象深度剖析，深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- 详解JavaScript的任务、微任务、队列以及代码执行顺序
摘要: 理解JS的执行顺序. 作者:前端小智 原文:详解JavaScript的任务.微任务.队列以及代码执行顺序 思考下面 JavaScript 代码: console.log("scrip ...
随机推荐
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Python学习笔记【第六篇】：迭代器、生成器、高阶函数、装饰器
迭代器 迭代器是访问集合元素的一种方式,迭代器从对象的第一个元素开始访问,知道所有元素被访问完成.迭代器只能往前访问,不能通过索引访问. 类型内部使用__iter__()方法转为迭代器,使用__nex ...
- python基础-字典(8)
一.字典介绍 字典和列表一样,也是存储多个数据的容器,只不过存储和读取的方式不同 字典的语法格式: 字典名 = {key1 : value1,key2:value2,key3:value3,……} 说 ...
- 阿里P8架构师讲述：3—5年程序员的发展和出路在哪里？
工作3—5年后,程序员们的成长将迈入一个全新阶段.这既是程序员们的黄金时期同时又是最迷茫的时期,因为大家必须要要思考一下今后的职业方向. 3—5年程序员的发展和出路在哪里? 是继续做技术人,还是向管理 ...
- Unity 5 使用Roslyn编译器支持C# 7
Unity 2017可选使用新的Mono编译器,支持.NET 4.6和C# 6,解决bug的同时,代码优化更佳. Unity 5可以使用社区开源方案:https://bitbucket.org/ale ...
- Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验
Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...
- java设计模式之——工厂模式
对于java的设计模式,我还是第一次认认真真的总结,以前用的时候都不曾留意细节,现在回头再看只知道该怎么设计,却忘记当时为嘛要用它了, 所以这次就做一个demo来再次复习总结一下,希望从中能学到新体悟 ...
- leetcode — jump-game-ii
/** * // Source : https://oj.leetcode.com/problems/jump-game-ii/ * * Created by lverpeng on 2017/7/1 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 控制器
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- Http协议中get和post的区别
get(默认值)是通过URL传递表单值,数据追加在action属性后面. post传递的表单值是隐藏到http报文体中,url中看不到. get是通过url传递表单值,post通过url看不到表单域的 ...