JavaScript基础（3）—— Javascript事件

最新推荐文章于 2022-10-28 08:49:54 发布

zl_StepByStep

最新推荐文章于 2022-10-28 08:49:54 发布

阅读量384

点赞数

分类专栏： JavaScript 学习总结文章标签： JavaScript事件 JavaScript事件流 JavaScript事件捕获 JavaScript事件冒泡 DOM级事件处理程序

本文链接：https://blog.csdn.net/zl_StepByStep/article/details/78777977

版权

JavaScript 学习总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。

例如： HTML事件是发生在HTML元素上的事情，当HTML页面中使用JavaScript时，Javascript可以触发这些事件。

一、事件流

事件流就是描述了页面中接收事件的顺序，在浏览器发展的初期，两大浏览器厂商IE和Netscape互掐，他们对事件流的解释出现了两种截然相反的定义。也就是：IE的冒泡，Netscape的事件捕获。下图是他们的简要结构：

（浏览器发展小故事：Netscape即网景浏览器，很早的一款网页浏览器了，现在都没人用了。后来由于微软的垄断行为，IE独大。由于网景很早就开源了，应该是上个世纪末。所以，现在很多的浏览器都是以之为雏形开发设计的。为了向其致敬，chrome、safari等浏览器代码里都有Browser name: Netscape。）

1.事件捕获

事件捕获正好相反，事件捕获最早由最不具体的节点接收，最具体的节点最后接收到事件。
当点击text部分时，先由window接收，然后逐级传至text。

2.事件冒泡

事件冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的节点（文档）。

当点击text部分时，先由text处的元素接收，然后逐级传播至window。

二、Javascript事件处理程序的三种方式

1.HTML事件处理程序

指的是直接在HTML中添加事件处理程序。

HTML按钮被点击示例：

<input id="btn" value="点击" type="button" οnclick="showmsg();"/>
<script> 
     function showmsg() {
	  alert("HTML添加事件处理");
    }	
</script>

给按钮添加一个onclick()事件，当点击按钮时，会执行showmsg()方法。

从上面的例子可以看出，事件处理是直接嵌套在元素里的，这样就会有一个bug：HTML代码和js代码的耦合性太强，如果之后想要修改js中的showmsg()方法，那么不仅要改js，还要改HTML，代码少的时候没啥问题，但是代码达到万行级别时，修改起来就很困难了，所以这个并不是很推荐。

2.DOM0级事件处理程序

指的是为指定对象添加事件处理。

<input id="btn" value="点击" type="button" />
<script>
    var btn = document.getElementById("btn"); 
     btn.onclick = function() {
	  alert("DOM0添加事件处理");
    }	
    btn.onclick = null;//如果想删除btn的点击事件，将其置为null即可
</script>

相对于HTML事件处理程序，DOM0级事件，HTML代码的js代码的耦合性大大降低，但还是感觉耦合度不够小！

3.DOM2级事件处理程序

DOM2也是对特定的对象添加事件处理程序，但是主要涉及到两个方法，用于处理指定事件和删除指定事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件）。

<input id="btn" value="点击" type="button" />
<script>
    var btn = document.getElementById("btn"); 
    btn.addEventListener("click",showmsg,false);   //这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处理在各浏览器中兼容性较好
     function showmsg() {
	  alert("DOM2添加事件处理");
    }	
    btn.removeEventListener("click",showmsg,false); //删除btn的点击事件,传入的参数一定要跟之前的参数一致，否则删除会失效！
</script>

三、事件冒泡和事件捕获的流程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
		    #outer{
		        border: dotted black;
		    }	
		    #inner{
		    	border: solid red;
		    }
			
		</style>
	</head>
	<body>
		<div id="outer" align="center">
			outer
			<div id="inner" align="center">inner</div> 
		</div>
		<script>
			var outer = document.getElementById('outer');
			var inner = document.getElementById('inner');
			inner.addEventListener('click',function() {
				alert('子节点捕获2')
			},true);			
			inner.addEventListener('click',function() {
				alert('子节点冒泡3');
			},false);
			
			outer.addEventListener('click',function() {
				alert('父节点捕获1')
			},true);
			outer.addEventListener('click',function() {
				alert('父节点冒泡4')
			},false);
			
		</script>
	</body>
</html>

运行上面的代码，点击子元素的时候，我们会发现，执行的先后顺序是：父节点捕获--子节点捕获--子节点冒泡--父节点冒泡。从这个例子中，大家也就明白了，另外，DOM2级事件规定事件包括三个阶段：

1》事件捕获阶段； 2》处于目标阶段； 3》事件冒泡阶段。

首先是捕获，然后处于目标阶段（即来到事件的发出位置），最后才是冒泡，不科学的是，居然木有DOM1级事件处理程序，大家注意下，别闹出笑话了！

补充一下：

1. IE事件处理程序也对应有两个方法：attachEvent()添加事件，detachEvent()删除事件，这两个方法接收相同的两个参数：事件处理程序名称与事处理函数。这里为什么没有布尔值呢？因为ie8以及更早的版本只支持事件冒泡，所以最后一个参数默认的相当于false来处理！（支持IE事件处理程序的浏览器有IE，opera）。

2. 事件对象是用来记录一些事件发生时的相关信息的对象，但事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！

四、JavaScipt中的常见事件

1.离焦事件

即失去焦点事件，可以在input等标签中添加onblur属性，其值为——离焦后处理事件的方法名()<，如下：

HTML中：

<input type="text" name="name" οnblur="nameCheck()">

JavaScript中：

function nameCheck() {
...
}

2.点击事件

即点击鼠标左键，给表单标签添加onclick属性，其值为方法名()。

3.页面加载事件

onload，当页面的其他内容加载完成之后，会执行的方法。要注意的是，JavaScript中的页面加载事件只能有一个，写多个的时候，最后一个生效。如在js中直接写一个匿名的onload方法：

onload = function() {
...
}