[JS] DOM 的事件监听、混杂模式和标准模式适配

本文主要内容：
事件监听
鼠标事件
键盘事件
页面加载事件

添加/移除事件监听

const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
	console.log(this) // this 是 window 对象
}, false)

function handler(event) {
	console.log(this) // 监听 btn 事件时，this 是监听的 DOM 元素	
	console.log(event.currentTarget) // 值同 this
	console.log(event.target) // 实际处理事件的 DOM，比如监听 body 的 click，点击了 btn，那么 target 是 btn
	console.log(event.type) // addEventListener 的事件名
	event.preventDefault()
}

btn.addEventListener('click', handler, false)

// 移除事件监听
btn.removeEventListener('click', handler)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

event 对象的常用属性

event 对象会作为事件监听函数的参数传入监听函数

• event.type 事件名
• event.target 处理事件的 DOM
• event.currentTarget 绑定事件监听的 DOM
• event.preventDefault() 阻止默认行为
• event.stopPropagation() 停止冒泡

常用的事件监听

• load 页面中所有资源加载完或者图片加载完触发
• unload 页面卸载时触发
• resize 浏览器窗口被缩放时触发
• scroll 页面滚动时触发
• blur、focus、focusin、focusout 失去焦点、获得焦点、获取焦点冒泡版、失去焦点冒泡版
• window.DOMContentLoaded HTML 加载完触发，无需等待图片等资源
• hashchange 页面 hash 发生改变时触发，可以用 location.hash 获取改变后的 hash

混杂模式下 scroll 事件的监听
通过 document.compatMode 可以判断页面的模式，如果该值等于 BackCompat 这表示该页面处于混杂模式（处于混杂模式可能是因为没有设置 doctype html）。混杂模式下 scroll 监听的是 body.scrollTop 而不是 document.documentElement.scrollTop

function getScrollTop() {
	let scrollTop;
	if(document.compatMode === 'BackCompat') {
		scrollTop = document.body.scrollTop
	} else {
		scrollTop = document.documentElement.scrollTop
	}
	
	return scrollTop
}
1
2
3
4
5
6
7
8
9
10

鼠标事件

• mouseup
• mouseenter 鼠标移入元素时触发，不支持冒泡
• mousedown
• click
• dblclick
• mouseover 鼠标移入元素触发，不会被键盘触发
• mouseleave 鼠标移出元素触发，不会被键盘触发
• mousemove 鼠标在元素中移动时触发
• mousewheel 鼠标滚轮滚动时触发，可以通过 event.wheelDelta 的正负判断滚动方向，向后滚动为 -120，向前滚动为 120。

移动端 click
在移动端设备上，可点击的单指触摸可点击元素会先触发 mouseover 事件。可点击元素是指有默认行为（如 a 标签）或者添加了 onclick 事件监听的元素。

click 的触发顺序

1. mousedown
2. mouseup
3. click
4. mousedown
5. mouseup
6. dblclick

click 能否触发取决于 click 前面依赖的事件是否成功触发。

客户端坐标

这些属性被保存在 event 对象中

• clientY、clientX 点击的视口坐标
• pageY、pageX 点击的页面坐标。当页面没有滚动条时，等于 clientY 和 clientX
• screenX、screenY 屏幕坐标，和页面、视口无关

键盘事件

• keydown 按下键盘上某个键时触发，一直按一直触发
• keypress 按下某个能输出字符的键时触发，一直按一直触发
• keyup 松开键盘上的键触发
• textInput 文本被输入到 input 之前触发

event 的属性

• keyCode 小写字母或数字的 ASCII 码，其他按键也有对应编码。可以通过 String.fromCharCode 转为实际的字母。
• key 用来代替 keyCode，如果按下的是字符键，则值是字符（如 k 或者 A），如果是非字符键，则是键名（如 Shift）

触摸事件

• touchstart
• touchmove
• touchend
• touchcancel

function handleTouchEvent(event) { 
 // 只针对一个触点
 if (event.touches.length == 1) { 
 let output = document.getElementById("output"); 
 switch(event.type) { 
	 case "touchstart": 
		 output.innerHTML += `
Touch started:` + 
		 `(${event.touches[0].clientX}` + 
		 ` ${event.touches[0].clientY})`; 
	 break; 
	 case "touchend": 
		 output.innerHTML += `
Touch ended:` + 
		 `(${event.changedTouches[0].clientX}` + 
		 ` ${event.changedTouches[0].clientY})`; 
	 break; 
	 case "touchmove": 
		 event.preventDefault(); // 阻止滚动
		 output.innerHTML += `
Touch moved:` + 
		 `(${event.changedTouches[0].clientX}` + 
		 ` ${event.changedTouches[0].clientY})`; 
	 break; 
 	} 
 } 
} 
document.addEventListener("touchstart", handleTouchEvent); 
document.addEventListener("touchend", handleTouchEvent); 
document.addEventListener("touchmove", handleTouchEvent); 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

模拟触发事件

JS高程的内容已经过时，去 MDN 查看最新方法。