JavaScript事件的绑定

最新推荐文章于 2020-05-20 15:38:20 发布

秦卿

最新推荐文章于 2020-05-20 15:38:20 发布

阅读量331

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript事件绑定

本文链接：https://blog.csdn.net/qinqingz/article/details/52823581

版权

JavaScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

当我们想在事件中同时使用window.onload<页面加载完后后执行>事件的时候,其实真正起作用的是最后一个事件,因为程序的执行是从上至下执行的,所以起作用的是最后一个.但是当团队共同开发的时候,难免每个人都需要用到页面加载完毕的这个事件,为了使每个事件都起到作用,这个时候我们便需要用到事件绑定.

了解事件绑定的用处后,我们需要知道事件绑定如何使用,但是这里要说的,事件绑定有兼容问题代码如下:

<span style="font-size:18px;">兼容IE方式 谷歌
lattachEvent(事件名称, 函数)，绑定事件处理函数
ldetachEvent(事件名称, 函数)，解除绑定
兼容DOM方式 火狐
laddEventListener(事件名称,函数, 捕获)
lremoveEventListener(事件名称, 函数, 捕获)</span>

<以上代码先忽视！>

当然,这是前言,下面我们继续关于事件的绑定

我们要想让 JavaScript 对用户的操作做出响应,那么我们首先要对 DOM 元素---<绑定事件处理函数>,所谓事件处理函数，就是处

理用户操作的函数，不同的操作对应不同的事件,而每个事件都有对应的名称.

在JavaScript中,有三种常用的绑定事件的方法：

1、在DOM元素中直接绑定.
2、在JavaScript代码中绑定.
3、绑定事件监听函数.

1.首先我们先来说在DOM元素中直接绑定 <DOM元素指的是HTML标签> 语法为: 事件='函数'

直接绑定有两种写法

第一种是直接原生绑定在HTML中 <行内式绑定> 代码如下:

<input οnclick="alert('Hello')"  type="button"  value="按钮" />

第二种是自定义函数 <行内式绑定> 代码如下:

	<body>
		<input type="button" οnclick="addEvent()" name="btn" id="btn" value="按钮" />
		<script type="text/javascript">
			function addEvent(){
			    alert("Hello");
			}
		</script>
	</body>

2.在javascript标签内绑定 <也就是我们常用的嵌入式绑定> 实现结构样式行为三分离使得网页文档结构清晰书写规范

第二种绑定的语法为:DOM对象.事件=函数(){需要执行的代码块};

代码如下:

	<script type="text/javascript">
		window.οnlοad=function (){
			var oBtn=document.getElementById('btn');
			oBtn.οnclick=function (){
				alert("Hello");
			};
		};
	</script>
	</head>
	<body>
		<input type="button" id="btn" value="按钮" />
	</body>

3、绑定事件监听函数. 使用 addEventListener() 兼容火狐或 attachEvent() 兼容IE 和谷歌来绑定事件监听函数

IE方式兼容IE 、谷歌

attachEvent(事件名称, 函数)，绑定事件处理函数

detachEvent(事件名称, 函数)，解除绑定

DOM方式兼容火狐

addEventListener(事件名称,函数, 捕获)

removeEventListener(事件名称, 函数, 捕获)

区别如下:

attachEvent() 函数语法： <用于绑定事件监听函数兼容IE8及以下>
DOM对象/即DOM元素.attachEvent(事件名称"与addEventListener()不同，这里的事件名称有"on"",函数);

addEventListener()函数语法： <标准事件监听方法W3C支持兼容火狐谷歌 Opera Safari IE9及以上>
DOM对象/即DOM元素.addEventListener(事件名称"这里的事件名称没有"on"",函数,事件Boolean类型<一般是false>);

addEventListener() 和 attachEvent() 的使用方法:

				//事件绑定   兼容IE  attachEvent    ！倒序执行
				oBtn.attachEvent('onclick',function (){                      //事件中都<span style="color:#cc0000;">有</span>  "on"
					alert('a');
				});
				oBtn.attachEvent('onclick',function (){
					alert('b');
				});
				
				//事件绑定兼容  兼容非IE浏览器  addEventListener   ！顺序执行
				oBtn.addEventListener('click',function (){                  //事件中<span style="color:#cc0000;">没有</span> "on"
					alert('a');
				},false);
				oBtn.addEventListener('click',function (){
					alert('b');
				},false);

下面 , 我们对这两种兼容方式进行兼容处理后封装并且处理有on 和没有 on的事件

代码如下:

			//封装IE和非IE兼容的函数
			//      进行事件绑定(对象,事件,函数)
			function addEvent(obj,ev,fn){
				if(obj.attachEvent){
					obj.attachEvent('on'+ev,fn);
				}
				else{
					//W3C支持 兼容火狐 谷歌 Opera Safari IE9及以上
					obj.addEventListener(ev,fn,false)
				}
			};

封装后的函数使用代码:

			//通过函数我们使用两个window.onload
			var oBtn=document.getElementById('btn');
			addEvent(window,'load',function (){
				alert('a');
			})
			addEvent(window,'load',function (){
				alert('b');
			})
			
			
			//封装IE和非IE兼容的函数
			function addEvent(obj,ev,fn){
				if(obj.attachEvent){
					obj.attachEvent('on'+ev,fn);
				}
				else{
					obj.addEventListener(ev,fn,false)
				}
			};

秦卿

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件的绑定

当我们想在事件中同时使用window.onload<页面加载完后后执行>事件的时候,其实真正起作用的是最后一个事件,因为程序的执行是从上至下执行的,所以起作用的是最后一个.但是当团队共同开发的时候,难免每个人都需要用到页面加载完毕的这个事件,为了使每个事件都起到作用,这个时候我们便需要用到事件绑定.
复制链接

扫一扫