javascript的事件

时间 2019-11-10

原文原文链接

javascript的事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。而 javaScript 与 HTML 之间的交互是经过事件实现的，可使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript 代码）与页面的外观（HTML 和 CSS 代码）之间的松散耦合。javascript

一、DOM事件流

DOM事件流包括了3个阶段：事件捕获阶段、处于目标阶段、时间冒泡阶段。
html

<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>

a、事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预约目标以前捕获它。从document元素一直传递到事件发生的元素（从大范围缩小到目标元素）java

b、事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，而后逐级向上传播到较为不具体的节点（文档）。从最具体的元素传播到document元素（从小范围到大范围）浏览器

c、当点击div元素时，在 DOM 事件流中，实际的目标（ <div> 元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到 <html> 再到 <body> 后就中止了。而后是 “处于目标” 阶段，因而事件在 <div>上发生。而后，冒泡阶段发生，事件又传播回文档。dom

二、事件处理

a、addEventListener()；给元素增长事件的函数。
编辑器

格式：addEventListener("event_name",callback,use-capture);
event_name：事件名称。
callback：事件处理方法
use-capture：false--》冒泡阶段/ture-->捕获阶段。
ps:大多数状况下，都是将事件处理程序添加到事件流的冒泡阶段，这样能够最大限度地兼容各类浏览器

测试函数

<!DOCTYPE html>
<html>
<head>

</head>
<html id="myHtml">
	<body id="myBody">
		<div id="myDiv">Click Me</div>
	</body>
<script>
	
	var bd=document.getElementById("myBody");
	var dv=document.getElementById("myDiv");
	var ht=document.getElementById("myHtml");
	<!--冒泡-->
	bd.addEventListener("click",function(){
		console.log("body冒泡："+(new Date()).toLocaleString());
	},false);
	dv.addEventListener("click",function(){
		console.log("div冒泡："+(new Date()).toLocaleString());
	},false);
	ht.addEventListener("click",function(){
		console.log("html冒泡："+(new Date()).toLocaleString());
	},false);	
	<!--捕获-->
	bd.addEventListener("click",function(){
		console.log("body捕获："+(new Date()).toLocaleString());
	},true);
	dv.addEventListener("click",function(){
		console.log("div捕获："+(new Date()).toLocaleString());
	},true);
	ht.addEventListener("click",function(){
		console.log("html捕获："+(new Date()).toLocaleString());
	},true);	
</script>	
</html>

b、removeEventListener()；删除元素的事件。测试

格式:removeEventListener("event_name",callback,use-capture)

ps:IE的事件处理方式：attachEvent()和detachEvent()。
this

格式:
attachEvent("event_name",callback);
detachEvent("event_name",callback);

三、事件对象

在触发 DOM 上的某个事件时，会产生一个事件对象 event ，这个对象中包含着全部与事件有关的信息：致使事件的元素、事件的类型以及其余与特定事件相关的信息。spa

<!DOCTYPE html>
<html>
<head>
<script>
	function doThis(){
		//console.log(this);
		console.log(event);
	}
</script>
</head>
<body>
	<div>
		<input type="button" value="Click Me" onclick="doThis()"/>
	</div>
</body>
</html>

查看下事件的传播途径

事件的属性

四、事件类型

主要的事件类型：

UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
焦点事件，当元素得到或失去焦点时触发；
鼠标事件，当用户经过鼠标在页面上执行操做时触发；
滚轮事件，当使用鼠标滚轮（或相似设备）时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户经过键盘在页面上执行操做时触发；
合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
变更（mutation）事件，当底层 DOM 结构发生变化时触发。

最新的具体的事件类型能够查看W3C的数据：http://www.w3school.com.cn/jsref/dom_obj_event.asp

a、UI事件：用户与页面上的元素交互时触发

b、焦点事件：焦点事件会在页面元素得到或失去焦点时触发

c、鼠标、滚动事件：当用户经过鼠标操做页面时触发。

鼠标事件的属性

d、键盘事件：用户在使用键盘时会触发键盘事件

e、触摸事件：移动端的事件类型。

touch事件的其它其它属性：