事件

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时控制台展示该元素的文本内容，不考虑兼容。

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
    var ul = document.querySelector('.ct');
    ul.addEventListener('click', function (event) {
        if (event.target.tagName.toLowerCase() === 'li') {
                console.log(event.target.innerText);
            }
    });
</script>

6. 补全代码，要求：

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
    var ul = document.querySelector('.ct');
    var startAdd = document.querySelector('#btn-add-start');
    var endAdd = document.querySelector('#btn-add-end');
    var content = document.querySelector('.ipt-add-content')
    startAdd.addEventListener('click', function () {
        if (content.value) {
            var addLi = document.createElement('li');
            var newText = document.createTextNode(content.value);
            addLi.appendChild(newText);
            ul.insertBefore(addLi, ul.firstChild);
        }
    });
    endAdd.addEventListener('click', function () {
        if (content.value) {
            var addLi = document.createElement('li');
            var newText = document.createTextNode(content.value);
            addLi.appendChild(newText);
            ul.appendChild(addLi);
        }
    });
    ul.addEventListener('click', function (event) {
        if (event.target.tagName.toLowerCase() === 'li') {
            console.log(event.target.innerText);
        }
    });
</script>

• 预览效果

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

<ul class="ct">
    <li data-img="https://i.loli.net/2017/09/28/59cbfb7a36e53.jpg">鼠标放置查看图片1</li>
    <li data-img="https://i.loli.net/2017/09/28/59cbfb7ba0ceb.png">鼠标放置查看图片2</li>
    <li data-img="https://i.loli.net/2017/09/28/59cbfb7de8e23.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var ul = document.querySelector('.ct');
    var imgPre = document.querySelector('.img-preview');
    var img = document.createElement('img');
    ul.addEventListener('mouseover', function (event) {
        if (event.target.tagName.toLowerCase() === 'li') {
            var source = event.target.getAttribute('data-img');
            img.setAttribute('src', source);
            imgPre.appendChild(img);
        }
    });
</script>

• 预览效果