DOM（Document Object Model 文件对象模型）
DOM将用例如XML、HTML等标记语言写成的结构化文档看成一颗树，该树上的节点也即是文档内的节点。简单来说，DOM是一组API，可以使用户通过任何实现了DOM API的语言操纵任何满足DOM标准的文档。
DOM 0级事件模式
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello World</title>
</head>
<body>
<div class='test'>Test</div>
<script>
let div = document.getElementsByClassName('test')[0];
div.onclick = function(){
console.log('click');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello World</title>
</head>
<body>
<div class='test' onclick='console.log("click)'>Test</div>
</body>
</html>
上述代码都为类名为test的div绑定了一个click事件发生时触发的方法。这种为DOM元素设置事件函数的方法便是DOM 0级事件模型中规定的。除此之外，DOM 0级事件模型还不允许为一个元素的同一事件绑定多个处理方法。若绑定了多个，则最后一个函数覆盖之前的。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello World</title>
</head>
<body>
<div class='test'>Test</div>
<script>
let div = document.getElementsByClassName('test')[0];
div.onclick = function(){
console.log('click');
}
//如果用户点击Test则会在控制台输出click again而不是click。
div.onclick = function(){
console.log('click again');
}
</script>
</body>
</html>
DOM 2级事件模型
DOM 2级事件模型为我们提供两个方法分别用来添加和移除事件处理方法。
- addEventListener()
- removeEventListener()
这两个方法的前两个参数是相同的，分别是事件名和事件处理函数（remove方法无法移除匿名函数）。而add方法则多出了一个参数，若传入true，则事件处理方法在事件捕获阶段被调用，反之则在事件冒泡阶段被调用。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello World</title>
</head>
<body>
<div class='test'>Test</div>
<script>
let div = document.getElementsByClassName('test')[0];
div.addEventListener('click', function(){
console.log('click');
}, false);
div.addEventListener('click', function(){
console.log('click again');
}, true);
</script>
</body>
</html>
与DOM 0级不同，DOM 2级事件模型允许你为同个元素的同个事件添加多个事件处理函数，在触发时间时将会按照文档顺序被先后调用。
事件的冒泡与捕获
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello World</title>
</head>
<body>
<div id='one'>
<div id='two'>
<div id='three'>
<p>Test</p>
</div>
</div>
</div>
<script>
let div1 = document.getElementById('one');
let div2 = document.getElementById('two');
let div3 = document.getElementById('three');
div1.addEventListenr('click' , function(event){
console.log('one');
}, false);
div2.addEventListenr('click' , function(event){
console.log('two');
}, false);
div3.addEventListenr('click' , function(event){
console.log('three');
}, false);
div1.addEventListenr('click' , function(event){
console.log('one');
}, true);
div2.addEventListenr('click' , function(event){
console.log('two');
}, true);
div3.addEventListenr('click' , function(event){
console.log('three');
}, true);
</script>
</body>
</html>