事件

解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理。

1. 事件传播机制主要有三种：

• 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素（从小到大）
• 事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反（从大到小）
• DOM事件流：DOM2 级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段（标准浏览器现在都使用 DOM 事件流，IE 不支持事件流，只支持事件冒泡）

2.阻止传播

• stopPropagation() 取消事件进一步捕获或冒泡

3. 取消默认事件
   preventDefault() 取消事件默认行为
4. 事件代理
   通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target 指向引发触发事件的元素。

---

写一个 Demo，演示事件传播的过程，演示阻止传播的效果。

  
click

  container
  

    box
    
target
  

  

---

解释DOM2事件传播机制。

dom2事件传播

补全代码，要求：

当点击按钮开头添加时在

这里是

元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

  
这里是
  
饥人谷
  
任务班


开头添加
结尾添加

  
  
  


  

    
这里是
    
饥人谷
    
任务班
  
  
  开头添加
  结尾添加
  

---

onlick与addEventListener的区别？

结论：

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent