DOM对象(三) ——DOM总结和 事件高级、事件对象、DOM事件流、常用鼠标事件及常用键盘事件

DOM的总结

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

• 文档：一个页面就是一个文档，DOM中使用document表示
• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
• 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

创建

1. document.write
2. innerHTML
3. createElement

增加

1. appendChild
2. insertBefore

删

1. removeChild

改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

1. 修改元素属性：src、href、title等
2. 修改普通元素内容： innerHTML。innerText
3. 修改表单元素：value 、 type、disabled等
4. 修改元素样式： style、className

查

主要获取查询dom的元素

1. DOM提供的API方法： getElementById、setElementByTagName 古老用法不推荐
2. H5提供的新方法：querySelector、querySelectorAll 提倡
3. 利用节点操作获取元素的方法：父（parentNode）、 子（children）、兄（previousElementSibling。nextElementSibling） 提倡

属性操作

主要针对自定义属性

1. setAttribute： 设置dom的属性值
2. getAttribute： 等到dom属性值
3. removeAttribute： 移除属性

事件操作（重点）

接下来我们来整理事件操作。

事件高级

注册事件（2种方式）

1. 传统注册方式

利用on开头事件onclick

特点

• 注册时间的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

2. 方法监听注册方式

   w3c标准。推荐方式
   addEvementiListener（） 他是一个方法
   支持ie9之后版本

特点

• 同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

事件监听

.addEvementiListener（type，listener[，useCapture]）

该方法的三个参数

1. type
   事件类型字符串 比如：click，mouseover。注意这里不要带on

2. listener
   事件处理函数，事件发生时，会调用监听*函数

3. useCapture
   可选参数，是一个布尔值，默认是false。

删除事件（解绑事件）

方法监听注册方式

1. eventTarget.removeEventListener( type, listener[, useCapture]);
2. eventTarget. detachEvent (eventNamewi thon, callback) ;

DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？

事件流
描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流

DOM 事件流会经历3个阶段：
1. 捕获阶段
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。

2. 当前目标阶段

3. 冒泡阶段
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。

注意

• Js代码中只能执行捕获或者冒泡其中的一个阶段。

• onclick和attachEvent只能得到冒泡阶段

• addEventListener (type, listener[, useCapture] )第三个参数如果是 true ,表示在事件捕获阶段调用事件处理程序;如果是false (不写默认就是false) ,表示在事件冒泡阶段调用事件处理程序。

• 有些事件是没有冒泡的,比如onblur、onfocus. onmouseenter. onmouseleave

  我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
  
  事件冒泡

 <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function() {
   
            alert('son');
        }, false);
		// 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
   
            alert('father');
        }, false);
		// 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
   
            alert('document');