事件

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

DOM0级事件,填加多个事件处理程序时, 会出现后面的覆盖前面的这种情况,而DOM2则不会出现这种情况.
DOM0有两种方式,一种是通过内联方式,另一种是通过on+事件名的方式.
DOM2级事件通过addEventListener和removeEventListener来填加事件监听和
删除事件的监听,接受三个参数,事件类型,事件处理方法,布尔,不能通过removeEventLis
tener来移除匿名函数.

2. attachEvent与addEventListener的区别？

attachEvent适用于IE，而addEventListener适用于所有其它主流浏览器.
attachEvent中的事件名带on 而addEventListener中的事件名不带on.
通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行； 对于addEventListener的事件处理程序则是按照添加顺序执行.
在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身.
attachEvent方法两个参数:第一个参数为事件名称,第二个参数为接收事件处理的函数,addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数是一个bool值,为true的话在事件捕获阶段处理事件，为false的话在冒泡阶段处理事件，默认为false.

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

IE事件冒泡：一开始由最具体的元素接受事件，然后逐级向上传递到较为不具体的事件.
DOM2事件传播机制：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段.

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

对于兼容DOM2级事件传播方式的浏览器，事件处理函数会传入一个event对象，调用event.stopPropagation()方法阻止事件继续传播，调用event.preventDefault()取消默认事件。对于老版本IE来说，设置event对象的cancelBubble位true来取消事件冒泡，设置returnValue的值为false来取消默认事件.

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

<ul class="ct">
    <li>这里是</li>
    <li>简书</li>
    <li>事件</li>
</ul>

<script>
    document.querySelector(".ct").addEventListener("click", function (e) {
        console.log(e.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 ct = document.querySelector('.ct');
    var ipt = document.querySelector('.ipt-add-content');
    var btnend = document.querySelector('#btn-add-end');
    var btnstart = document.querySelector('#btn-add-start');

    btnend.addEventListener('click',function(){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.appendChild(li);
        console.log(ct);
    });

    btnstart.addEventListener('click',function(){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.insertBefore(li,ct.firstChild);
        console.log(ct);
    })

    ct.addEventListener('click',function(e){
        console.log(e.target.innerText);
    });
</script>

7. 补全代码，要求：

当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

 <style>
        .li1{
              background:red;
        }
        .li2{
              background:yellow;
        }
        .li3{
              background:pink;
        }
</style>
<ul class="ct">
    <li class="li1" data-img="http://img.mp.itc.cn/upload/20170325/11f5f959b7c3479cb1472118ad4b4467_th.jpeg">鼠标放置查看图片1</li>
    <li class="li2" data-img="http://photocdn.sohu.com/recom/20170325/130238650_600_300_0.jpeg">鼠标放置查看图片2</li>
    <li class="li3" data-img="http://photocdn.sohu.com/recom/20170325/130258463_600_300_0.jpeg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
   var ct = document.querySelector('.ct'),
       preview = document.querySelector('.img-preview');

    ct.addEventListener('mouseover', function (e) {
        if (e.target.tagName.toLowerCase() === "li") {
            var dataImg = e.target.getAttribute('data-img');
            preview.innerHTML = '<img src= "' + dataImg + '">'
            console.log(e.target.innerText);
        }
    });
</script>