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

DOM2级事件特点：

1. 存在两个方法，用于处理制定和删除事件处理程序的操作（addEventListener和removeEventListener），接受三个参数：事件名称、事件处理程序的函数和布尔值，布尔值为false表示在事件冒泡阶段调用事件处理程序。
2. DOM2级事件处理程序也会依附在元素的作用域中运行。
3. 优点：可同时绑定几个事件，且不会 被覆盖；
4. 缺点：不兼容。IE不支持DOM2级事件，但是有两个类似的方法
   attachEvent()/detachEvent()。 attachEvent()/detachEvent()只接受两个参数，没有最后一个布尔值，该事件只能发生在冒泡阶段。

DOM0级事件特点：

1. 在DOM0级事件中，事件名均是以on开头的（click—>onclick）。
2. DOM0级事件处理程序是在元素的作用域中运行的，也就是说，在事件处理程序中，this引用就是这个元素对象。
3. 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
4. 取消事件冒泡：event.stopPropagation()/event.cancleBubble = true(此方法为IE中)。
5. 删除事件处理程序，将属性值设为null即可（btn.onclick=null）。
6. DOM0级事件不支持事件捕获。
   优点：处理事件程序的传统方式，第四代web浏览器至今，所有浏览器都支持。
   缺点：一个事件处理程序只能对应一个处理函数，同时绑定多个事件时，事件会被覆盖
   这是因为btn.onclick实际上就像一个指针，在执行第一个事件处理程序时它指向了内存中的一个引用，执行第二个事件处理程序时它又会指向另一个内存的引用，最终会指向最后一个事件处理函数的内存引用。

2. attachEvent与addEventListener的区别？

主要的区别：

1. 参数个数不相同，addEventListener有三个参数，attachEvent还有两个，attatchEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在冒泡阶段还是捕获阶段处理（一般为了兼容性都设置为冒泡阶段）
2. 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click,load），而attachEvent第一个参数指明的是事件处理函数名称（onclick,onload）
3. 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以会返回undefined,而不是元素id
4. 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律（添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加多了就无规律了），所以添加多个是时候不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要依赖于浏览器

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

IE事件的冒泡：最内部的元素节点逐级向上传播到window(document)。
DOM2级事件的传播机制：三种传播方式冒泡阶段，捕获阶段和DOM事件流。冒泡阶段传播方式是由下层层向上。捕获阶段传播方式是由上层层向下。DOM事件流是先事件捕获由上层层向下，然后是实际目标接受事件最后由下层层向上冒泡。

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

阻止事件冒泡使用event.stopPropagation()
方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上新定义的事件监听函数
阻止默认事件使用event.preventDefault()
方法不会阻止事件的进一步传播,只要在事件的传播过程中（捕获阶段、目标阶段、冒泡阶段皆可），使用了preventDefault方法，该事件的默认方法就不会执行

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
function $$(ct){
    return document.querySelector(ct)
}

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

6. 补全代码，要求：当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.

当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
    function $$(ct) {
        return document.querySelector(ct)
    }

    $$('.ct').addEventListener('click',function(e){
        console.log(e.target.innerText)
    });

    $$('#btn-add-start').addEventListener('click',function(){
        var newLi = document.createElement('li');
        newLi.innerText = document.querySelector('.ipt-add-content').value;
        if( newLi.innerText.match(/\s/))
            ct.insertBefore(newLi, ct.firstChild);
        });

    $$('#btn-add-end').addEventListener('click',function(){
        var newLi = document.createElement('li');
        newLi.innerText = document.querySelector('.ipt-add-content').value;
        if( newLi.innerText.match(/\s/))
            ct.appendChild(newLi);
    })
</script>

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

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var ct = document.querySelector('.ct'),
    preview = document.querySelector('.img-preview');

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