事件

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

• DOM0级就是将一个函数赋值给一个事件监听，DOM0级的事件监听是元素的方法，在元素的作用域中运行，程序中的 this 引用当前元素，以这种方式添加的事件监听会在事件流的冒泡阶段被处理。DOM0级删除指定的事件监听，只需要将事件监听属性的值设为 null 即可。

var btn = document.getElementById('mybtn');
btn.onclick = function () {
    console.log(this.id);      //"mybtn"
};
btn.onclick = null;

• DOM2级事件监听定义了两个方法，addEventListener() 和 removeEventListener()，所有DOM节点中都包含这两个方法，都接受三个参数，要处理的事件名、作为事件监听的函数和一个布尔值，最后这个布尔值如果是 true，表示在捕获阶段调用事件监听，如果是 false，表示在冒泡阶段调用事件监听。DOM2级事件监听也是在其依附元素的作用域中运行，使用DOM2级事件监听的好处是可以添加多个事件监听。通过addEventListener() 添加的事件监听只能使用 removeEventListener() 来移除，移除时传入的参数必须与添加时使用的参数相同。

var btn = document.querySelector('#mybtn');
var handler = function () {
    console.log(this.id);   
};
btn.addEventListener('click', handler);     //"mybtn"
btn.removeEventListener('click', handler);

2. attachEvent与addEventListener的区别？

• attachEvent() 是 IE 中的DOM方法，接受两个参数，事件监听名称与事件监听函数，由于 IE8 及更早版本只支持事件冒泡，所以通过 attachEvent() 添加的事件监听都会被添加到冒泡阶段。
• attachEvent() 的事件监听会在全局作用域中运行，因此 this 等于 window。

var btn = document.querySelector('#mybtn');
btn.attachEvent('onclick',  function () {
    console.log(this === window);   //true   
});

• attachEvent() 在为同一个元素添加两个或更多的事件监听时，事件监听不是以添加它们的顺序执行，而是以相反的顺序（较少时）或无序（较多时）被触发。

var btn = document.querySelector('#mybtn');
btn.attachEvent('onclick',  function () {
    console.log('clicked'); 
});
btn.attachEvent('onclick',  function () {
    console.log('hello world'); 
});
//先输出 'hello world'，再输出 'clicked'

• 使用attachEvent() 添加的事件监听可以使用 detachEvent() 来移除，但必须提供相同的参数。

var btn = document.querySelector('#mybtn');
var handler = function () {
    console.log(this.id);   
};
btn.attachEvent('onclick', handler);     //"mybtn"
btn.detachEvent('onclick', handler);

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

• 事件冒泡：事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体节点（文档）。

  
  
  

  事件冒泡

• DOM2事件流：事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截取事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是事件冒泡阶段，可以在这个阶段对事件做出响应。

  
  
  

  DOM2事件流

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

• 阻止事件冒泡：如果事件的 bubbles 属性值为 true，可以使用 stopPropagation() 方法来阻止事件的默认行为。

var btn = document.querySelector('#mybtn');
btn.addEventListener('onclick',  function (event) {
    console.log('clicked'); 
    event.stopPropagation();
});
document.body.addEventListener('onclick',  function () {
    console.log('hello world'); 
});
//点击 btn 时，只会输出"clicked"，因为事件不会传播到 document.body

• 阻止默认事件：如果事件的 cancelable 属性值为 true，可以使用 preventDefault() 方法来阻止事件的默认行为。

var link = document.querySelector('#mylink');
link.addEventListener('click', function (event) {
    event.preventDefault();
});

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

    
这里是
    
饥人谷
    
前端6班

6. 补全代码，要求：

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

• 预览效果

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

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

• 预览效果