事件 - DOM编程

何为 DOM 事件，HTML DOM 使JavaScript 有能力对 HTML 事件做出反应。

1. 事件流

一个 DOM 事件可以分为捕获过程、触发过程、冒泡过程。
下面一个<a>元素被点击为例。

红虚线：捕获过程。当DOM事件发生时，它会从window节点一路跑下去直到触发事件元素的父节点为止，去捕获触发事件的元素。
红绿实线：触发过程。当事件被捕获之后就开始执行事件绑定的代码。
绿虚线：冒泡过程。当事件代码执行完毕后，浏览器会从触发事件元素的父节点开始一直冒泡到window元素（即元素的祖先元素也会触发这个元素所触发的事件）。

看一个例子。

<!DOCTYPE html>
<html>
	<head>		
		<style></style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
		$(function(){
			// 捕获过程
			document.addEventListener('click',function(){
				console.log('capture：'+1);
			},true);
			var tableNode = document.getElementsByTagName('table')[0];
			tableNode.addEventListener('click',function(){
				console.log('capture：'+2);
			},true);
			var tdNode = tableNode.getElementsByTagName('td');
			for(let i = 0, tdlength = tdNode.length; i < tdlength; i++){
				tdNode[i].addEventListener('click',function(){
					console.log('capture：'+3);
				},true);
			}
			
			// 冒泡事件
			document.addEventListener('click',function(){
				console.log('bubble：'+1);
			});
			tableNode.addEventListener('click',function(){
				console.log('bubble：'+2);
			});
			for(let i = 0, tdlength = tdNode.length; i < tdlength; i++){
				tdNode[i].addEventListener('click',function(){
					console.log('bubble：'+3);
				},true);
			}
		});
		</script>
	</head>
	<body>
		<table>
			<tbody>
				<tr>
					<td>Grove</td>
					<td>Aeolian</td>
				</tr>
				<tr>
					<td>Charlie</td>
					<td>Dorian</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

每次点击td时触发点击事件，并执行代码console.log('...')。
DOM规范规定，同一节点同一阶段的事件应按照注册函数的顺序执行。

2. 事件注册

2.1 注册事件

eventTarget.addEventListener(type, listener[,useCapture])

evenTarget表示要绑定事件的DOM元素。
type表示要绑定的事件。
listener表示要绑定的函数。
useCapture可选参数，表示是否捕获过程。

useCapture为设定是否为捕获过程，默认事件均为冒泡过程，只有useCapture为true时才会启用捕获过程。

var tableNode = document.getElementsByTagName('table')[0];
// 注册事件
tableNode.addEventListener('click',function(){
	console.log('capture：'+2);
},true);

var tableNode = document.getElementsByTagName('table')[0];
// 注册事件
tableNode.addEventListener('click', clickHandler,true);
var clickHandler = function(event) {
	console.log('capture：'+2);
};

<!DOCTYPE html>
<html>
	<head>		
		<style></style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
		$(function(){
			var div = document.getElementsByTagName('div')[0];			
			//div.onclick = clickHandler;
			// 注册事件的第二种方式，不推荐使用。
			div.onclick = function(){
				clickHandler();
				foo();
			  // 其他处理函数
			};

			function clickHandler(){
				console.log('clickHandler');
			}

			function foo(){
				console.log('foo');
			}
		});
		</script>
	</head>
	<body>
		<div>Hello</div>
	</body>
</html>

2.2 取消事件

eventTarget.removeEventListener(type, listener[,useCapture]);

evenTarget表示要绑定事件的DOM元素。
type表示要绑定的事件。
listener表示要绑定的函数。
useCapture可选参数，表示是否捕获过程。

2.3 触发事件

点击元素，按下按键均会触发 DOM 事件，当然也可以以通过代码来触发事件。
看一个例子。

<form>
  <textarea></textarea>
</form>

const form = document.querySelector('form');
const textarea = document.querySelector('textarea');

const eventAwesome = new CustomEvent('awesome', {
  bubbles: true,
  detail: { text: () => textarea.value }
});

form.addEventListener('awesome', function(e){
	console.log(e.detail.text());
});

textarea.addEventListener('input', function(e){
	e.target.dispatchEvent(eventAwesome);
});

3. 事件对象

调用事件处理函数时传入的信息对象，这个对象中含有关于这个事件的详细状态和信息，它就是事件对象event。其中可能包含鼠标的位置，键盘信息等。

<!DOCTYPE html>
<html>
	<head>		
		<style></style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			function whichButton(event){
				var btnNum = event.button;
				if (btnNum==2){
					console.log("您点击了鼠标右键！")
				} else if(btnNum==0){
					console.log("您点击了鼠标左键！")
				} else if(btnNum==1){
					console.log("您点击了鼠标中键！");
				} else{
					console.log("您点击了" + btnNum + "号键，我不能确定它的名称。");
				}
			}
		</script>
	</head>
	<body onmousedown="whichButton(event)">
		<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
	</body>
</html>

相关阅读：HTML DOM Event 对象
事件对象event的方法：

stopPropagation：阻止事件冒泡传播
stopImmediatePropagation：阻止冒泡传播
preventDefault：阻止默认行为

event.stopPropagation()：如果在当前节点已处理事件，则阻止事件被冒泡传播至 DOM 树最顶端即window对象。
event.stopImmediatePropagation()：除了阻止将事件冒泡传播至window对象外，还会阻止在此事件后的事件的触发。
默认行为是指浏览器定义的默认行为（点击一个链接时，链接默认就会打开；双击文字的时候，文字就会被选中）。

4. 事件分类

<!DOCTYPE html>
<html>
	<head>		
		<style></style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			function foo(event){ 
				console.log(event);
			}
		</script>
	</head>
	<body onmousedown="foo(event)">
		<p>Click somewhere in the document.</p>
	</body>
</html>

Event
- UIEvent
  - FocusEvent
  - InputEvent
  - KeyboardEvent
  - MouseEvent
    - WheelEvent

5. 事件代理

事件代理是指在父节点上（可为元素最近的父节点也可为上层的其他节点）处理子元素上触发的事件，其原理是通过事件流机制而完成的。可以通过事件对象中获取到触发事件的对象（如下所示）。

<!DOCTYPE html>
<html>
	<head>		
		<style></style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
		$(function(){
			document.getElementById('list').addEventListener('click', function (e) {
			  // 兼容性处理
			  var event = e || window.event;
			  var target = event.target || event.srcElement;
			  console.log(target);
			  // 判断是否匹配目标元素
			  if (target.nodeName.toLocaleLowerCase() == 'li') {
				console.log(target.innerHTML);
			  }
			});
		});
		</script>
	</head>
	<body>
		<ul id="list">
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
			<li>item 4</li>
			<li>item 5</li>
		</ul>
	</body>
</html>

注意：注册事件时addEventListener需要包含在$(function(){})里面，否则报错。
相关阅读：$(document).ready和window.onload的区别

参考：

事件 · 前端开发笔记本

posted @ 2019-08-27 17:21 gzhjj 阅读(257) 评论(0) 编辑收藏举报

刷新页面返回顶部

gzhjj