Javascript基础：DOM简述

一、DOM的事件模型是什么？

DOM之事件模型：

脚本模型
内联模型（同类一个，后者覆盖）
动态绑定（同类多个）

<body> 

<!--⾏内绑定：脚本模型--> 
<button onclick="javascrpt:alert('Hello')">Hello1</button> 

<!--内联模型--> 
<button onclick="showHello()">Hello2</button> 

<!--动态绑定--> 
<button id="btn3">Hello3</button> 
</body> 

<script> 
/*DOM0：同⼀个元素，同类事件只能添加⼀个，如果添加多个， * 后⾯添加的会覆盖之前添加的*/ 
function shoeHello() {
    
     alert("Hello"); }

var btn3 = document.getElementById("btn3"); 
btn3.onclick = function () {
    
     alert("Hello"); }

/*DOM2:可以给同⼀个元素添加多个同类事件*/ 
btn3.addEventListener("click",function () {
    
     alert("hello1"); }); 
btn3.addEventListener("click",function () {
    
     alert("hello2"); })

if (btn3.attachEvent){
    
     
	/*IE*/ 
	btn3.attachEvent("onclick",function () {
    
     alert("IE Hello1"); })
}else {
    
     
	/*W3C*/ 
	btn3.addEventListener("click",function () {
    
     alert("W3C Hello"); })
}
</script>

二、DOM的事件流是什么？

事件就是文档或浏览器窗口中发生变化的一些特定交互瞬间，而事件流（又叫事件传播）描述的是从页面中接收事件的顺序。

1.事件冒泡

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

例子：

<!DOCTYPE HTML> <html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<body> 
	<div></div> 
</body> 
</html>

如果单击了页面中的< div >元素，那么这里click事件沿着DOM树向上传播，在每一个节点上都会发生，按照如下顺序传播：

div
body
html
document

2.事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，⽽最具体的节点应该最后接收到事件。事件捕获的⽤意在于在事件到达预定⽬标之前就捕获它。

还是以上⼀节的html结构为例: 在事件捕获过程中，document对象⾸先接收到click事件，然后事件沿DOM树依次向下，⼀直传播到事件的实际⽬标，即< div >元素。

document
html
body
div

3.事件流

事件流⼜称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段(capture phase)、处于⽬标阶段 (target phase)和事件冒泡阶段(bubbling phase)。

在这里插入图片描述

触发顺序通常为

进行事件捕获，为截获事件提供了机会。
实际的目标接收到事件。
冒泡阶段，可以在这个阶段对事件做出响应。

三、什么是事件委托？

事件委托就是利⽤事件冒泡，只指定⼀个事件处理程序，就可以管理某⼀类型的所有事件。

<ul id="parent"> 
	<li class="child">one</li> 
	<li class="child">two</li> 
	<li class="child">three</li> 
	... 
</ul> 

<script type="text/javascript"> 
//⽗元素 
var dom= document.getElementById('parent'); 

//⽗元素绑定事件，代理⼦元素的点击事件 
dom.onclick= function(event) {
    
    
	var event= event || window.event; 
	var curTarget= event.target || event.srcElement; 
	if (curTarget.tagName.toLowerCase() == 'li') {
    
     //事件处理 } 
} 
</script>

在绑定⼤量事件的时候往往选择事件委托。

优点:

节省内存占⽤，减少事件注册。
新增子对象时无需再次对其绑定事件，适合动态添加元素。

局限性:

focus、blur 之类的事件本身没有事件冒泡机制，所以⽆法委托。
mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗⾼，不适合事件委托。