系统带你学习 WebAPIs 第三讲(1)

=================================================================

本篇学习目标：

能够使用removeChild()方法删除节点

能够完成动态生成表格案例

能够使用传统方式和监听方式给元素注册事件

能够说出事件流执行的三个阶段

能够在事件处理函数中获取事件对象

能够使用事件对象取消默认行为

能够使用事件对象阻止事件冒泡

能够使用事件对象获取鼠标的位置

能够完成跟随鼠标的天使案例

1.1. 节点操作

---

1.1.1 删除节点

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

删除

• 熊大
• 熊二
• 光头强

• 1.1.2 案例：删除留言

  

  发布

  1.1.3 复制（克隆）节点

  
• 1111
• 2
• 3

• 1.1.4 案例：动态生成表格

  

  

  1.1.5 创建元素的三种方式

  

  1.1.6 innerTHML和createElement效率对比

  innerHTML字符串拼接方式（效率低）

  createElement方式（效率一般）

  innerHTML数组方式（效率高）

  1.2. DOM的核心总结

  ---

  

  

  关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

  1.2.1. 创建

  

  1.2.2. 增加

  

  1.2.3. 删

  

  1.2.4. 改

  

  1.2.5. 查

  

  1.2.6. 属性操作

  

  1.3. 事件高级

  ---

  1.3.1. 注册事件（2种方式）

  

  案例演示：

  事件

  1.3.2 事件监听

  addEventListener()事件监听（IE9以后支持）

  

  eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

  

  attacheEvent()事件监听（IE678支持）

  

  ​ eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

  

  事件监听兼容性解决方案

  封装一个函数，函数中判断浏览器的类型：

  

  1.3.3. 删除事件（解绑事件）

  

  1
  2
  3

  **删除事件兼容性解决方案 **

  

  1.3.4. DOM事件流

  html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。

  当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

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

  

  比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。

  

  

  当时的2大浏览器霸主谁也不服谁！

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

  Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。

  江湖纷争，武林盟主也脑壳疼！！！

  最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —–— 先捕获再冒泡。

  现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

  网景虽死，精神永存！

  DOM 事件流会经历3个阶段：

  1. 捕获阶段

  2. 当前目标阶段

  3. 冒泡阶段

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

  

  

  事件冒泡

  son盒子

  事件捕获

  son盒子