详解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 ...
随机推荐
- 隔壁小孩都要知道的Drupal配置
i春秋作家:Arizona 原文来自:隔壁小孩都要知道的Drupal配置 隔壁小孩都要知道的Drupal配置 Drupal是一个开源的PHP内容管理系统,具有相当复杂的架构.它还具有强大的安全模型.感 ...
- OkHttp 设置 User-Agent 教程
我们知道OkHttp走的并不是原生的http请求,因此在header里面并没有真正的User-Agent,而是“okhttp/版本号”这样的字符串,因为后台需要统计信息,要求传入正确的User-Age ...
- Kali学习笔记38：文件上传漏洞
早些年,提到Web渗透,或者搜索一些黑客教程 基本都会看到文件上传漏洞. 它是一个很经典的漏洞 但它本质其实不是一个漏洞,而是网站本身的上传文件功能 不过如果我们上传了Webshell,那么就成为了文 ...
- Redis学习笔记之延时队列
目录 一.业务场景 二.Redis延时队列 一.业务场景 所谓延时队列就是延时的消息队列,下面说一下一些业务场景比较好理解 1.1 实践场景 订单支付失败,每隔一段时间提醒用户 用户并发量的情况,可以 ...
- php 中构造函数和析构函数
构造函数: 在对象实例化时被调用,一个类中只能有一个构造函数,在类中起初始化的作用. 析构函数: 在对象结束时被自动调用. 话不多说,用一段代码来说明两者的区别: <?php //定义一个类 c ...
- eos开发(二)使用cleos命令行客户端操作EOS（钱包wallet基础操作）
不知道下边这一段英文你们是不是能看懂,如果看不懂那就算了,我就是转过来随便看看的. 总之你记住nodeos.cleos和keosd这三个工程十分重要就行了,回头咱们的研究都从这三个工程杀进去. EOS ...
- Docker Ubuntu中安装ping ifconfig命令
Ubuntu 容器环境安装ping ifconfig 进入容器执行:ifconfig ping 没有该命令 apt-get update ###命令 ifconfig apt-get install ...
- ES6之Promise的基本用法
之前多次看过阮一峰的ES6教程,对Promise也简单的理解过,但是,由于没在项目中运用过,所以记忆的并不深刻,昨天在进行项目的改良,有一个地方需要用到Promise 所以就这样写了: onload函 ...
- DotNetCore深入了解之一Startup类
一个典型的ASP.NET Core应用程序会包含Program与Startup两个文件.Program类中有应用程序的入口方法Main,其中的处理逻辑通常是创建一个WebHostBuilder,再生成 ...
- struts2整合uploadify插件怎样传参数
关于uploadify3.1,先看下帮助文档中的有些知识. 其中有个onUploadStart方法,我们可以使用这个向后台传参. 下面举个例子, js: <script type="t ...