文档章节

javascript事件的绑定

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 583
阅读 0
收藏 0

由于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>
这段代码,运行结果是弹出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');




© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
写个js/css动态加载的JavaScript插件

由于现在手上项目没用到jQuery,以及希望能动态加载js/css 所以就写了动态加载的脚本 原理简介: 通过给定的url参数中js/css文件的后缀动态插件节点 通过参数绑定添加到的父级节点 绑定节点加载...

关爱单身狗
2017/01/19
0
0
JavaScript零基础入门——(十三)JavaScript的事件

JavaScript零基础入门——(十三)JavaScript的事件 大家好,欢迎回到我们的JavaScript零基础入门。上一节课,我们了解了JavaScript定时器,也演示了一些比较经典的例子,其实我们已经用到了...

JandenMa
2018/07/01
61
0
说说 Vue.js 中的 v-on 事件指令

v-on 事件指令用于绑定事件。 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件。 html: 注意: 是 的简写形式, 即表示 。 js: 效果: @click 表达式即可以直接使用 js 语句,也可以是...

deniro
2018/11/24
0
0
Javascitp事件绑定方式之差异

关于javascript事件绑定的资料网上已有很多,这里总结自己使用过程中遇到的问题及得出的想法。 事件绑定的方式 1. 在DOM中直接绑定,如onlick=”function(){}” 2. DOM对象属性绑定,如obj.o...

欧阳小瓜
2013/07/09
251
0
WKWebView与js交互之完美解决方案

 随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascriptBridge,以及结合jav...

HeroHY
2017/05/15
30
0

没有更多内容

加载失败,请刷新页面

加载更多

DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
3
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
6
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
6
0
Python机器学习之数据探索可视化库yellowbrick

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维。陆续使用过plotly、seaborn,...

yeayee
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部