21.事件

1. DOM0事件和DOM2级在事件监听使用方式上有什么区别？

• DOM 0级

//举例
var btn = document.getElementById('id');
btn.onclick = function(){};

• 相当于元素的的属性，所以只能绑定一次，后面会覆盖前面；

• 删除事件处理程序将值设为null即可；

• 在事件冒泡阶段处理；

• DOM 2级

//举例
var btn = document.getElementById('id');
btn.addEventListener('click',functionName,boolean);

• 可以绑定多个事件处理程序；
• 通过removeEventListener()来移除事件处理程序，add和remove的函数需要一致，不能移除匿名函数；
• 第三个布尔值为true在捕获阶段处理，为false在冒泡阶段处理，默认false。

2. attachEvent与addEventListener的区别？

• attachEvent是早期IE中添加事件处理程序的方法

//举例
var btn = document.getElementById('id');
btn.attachEvent('onclick',listener);

• 事件处理程序在全局作用域下运行，this指代window；

• 同DOM0级一样只在冒泡阶段处理；

• addEventListener

//举例
var btn = document.getElementById('id');
btn.addEventListener('click',listener,boolean);

• 元素作用域下运行，this指代绑定事件的元素；
• 布尔值true为捕获阶段，false为冒泡阶段。

3. 解释IE事件冒泡和DOM2事件传播机制？

• IE事件冒泡
  首先由具体元素接收事件，然后一级一级向上直至根节点。

  
  
  

  IE事件冒泡

• DOM事件流
  分为事件捕获、处于目标阶段、冒泡阶段；即先有根节点接收事件而后是具体元素，再冒泡到根节点；方便截取事件。

  
  
  

  DOM事件流

4. 如何阻止事件冒泡？ 如何阻止默认事件？

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

• 取消事件默认行为
  preventDefault()

5. 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

    
这里是
    
饥人谷
    
前端6班

6. 补全代码，要求：

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

7. 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3