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

DOM0事件处理程序，事件名以'on'开头,可以直接通过 onclick写在html里面的事件, 比如:

<input onclick="alert(1)" />

DOM0级事件处理程序可以认为是元素的方法。删除DOM0级事件处理程序，将相应属性值设置为null即可。

DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;
DOM2级的事件规定了事件流包含三个阶段包括： 1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段（IE8以及更早版本不支持DOM事件流）;
DOM0的事件具有极好的跨浏览器优势, 会以最快的速度绑定, 如果你通过DOM2绑定要等到JS运行, DOM0不用, 因为DOM0是写在元素上面的

题目2： attachEvent与addEventListener的区别？

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

题目3：解释IE事件冒泡和DOM2事件传播机制？

ie事件模型的事件流只包括事件冒泡，而dom（2）事件模型的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。ie8以下的版本只支持ie事件模型，ie9及其他浏览器都支持dom事件流。

区别：
（1）添加事件处理程序的不同。dom0级只能在冒泡阶段调用事件处理程序。dom2级事件模型通过addEventListener支持在冒泡和捕获阶段注册事件处理程序。而ie事件模型通过attachEvent在事件冒泡阶段注册事件处理程序。
（2）事件处理程序的event参数和this的作用域不同。addEventListener中的this就指向当前事件元素，event就是当前事件对象。而attachEvent的this指向window，event是全局对象作用域window中的event对象，但是同时也会作为参数直接传递给事件处理程序函数。但是在只支持ie事件模型的浏览器中通过dom0级方法注册的事件处理程序中的event，只能通过全局的window.event进行访问，但无论在哪个浏览器中，通过dom0级注册的事件处理程序中的this也是指向当前事件元素，可以做到很好的跨浏览器兼容。
（3）移除事件监听。通过dom0级注册的事件处理程序，通过 element.onclick=null;这样的形式来移除注册事件。通过dom2级事件注册的时间处理程序通过removeEventListener来移除事件处理程序，而ie事件模型通过datachEvent来移除。
（4）阻止默认事件模型和阻止事件冒泡的方法。dom2级可以通过preventDefault来阻止事件的默认行为。ie通过returnValue属性为false来阻止事件的默认行为。dom2采用stopPropagation方法来阻止冒泡，而ie通过cancelBubble属性为true来阻止冒泡。

题目4：如何阻止事件冒泡？如何阻止默认事件？

阻止事件冒泡:
w3c 的方法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true

function stopHandler(event)  
    window.event?window.event.cancelBubble=true:event.stopPropagation();  
}

阻止默认事件:
w3c 的方法是 e.preventDefault()，IE 则是使用 e.returnValue = false;

function cancelHandler(event){  
  var event = event || window.event;  //用于IE  
  if(event.preventDefault) event.preventDefault();  //标准技术  
  if(event.returnValue) event.returnValue = false;  //IE  
  return false;   //用于处理使用对象属性注册的处理程序  
} ``` 

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

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
document.querySelector('.ct').addEventListener('click',function(e){
console.log(e.target.innerText)//e.target指向被点击的元素,而this指向'.ct'
})
</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 input = document.querySelector('.ipt-add-content')
    var endBtn = document.querySelector('#btn-add-end')
    var startBtn = document.querySelector('#btn-add-start')
    startBtn.addEventListener('click',function(){
        if(/\S/.test(input.value)){
            var newLi = document.createElement('li')
            newLi.innerText = input.value
            ct.insertBefore(newLi,ct.firstChild)//在第一个元素前添加元素,要有个参照点firstLi
         }
    }) 
    endBtn.addEventListener('click',function(){
        if(/\S/.test(input.value)){
            var newLi = document.createElement('li')
            newLi.innerText = input.value
            ct.appendChild(newLi)
        }
    })
    ct.addEventListener('click',function(e){
    if (e.target.tagName.toLowerCase() === "li"){
        console.log(e.target.innerText)
    }
    })
</script>```

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

<ul class="ct">
<li data-img="http://img07.tooopen.com/images/20170620/tooopen_sy_214579652271.jpg">鼠标放置查看图片1</li>
<li data-img="http://img06.tooopen.com/images/20161022/tooopen_sy_182719487645.jpg">鼠标放置查看图片2</li>
<li data-img="http://img06.tooopen.com/images/20170111/tooopen_sy_196580168948.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview">33</div>
<script>
var ct = document.querySelector('.ct'),
preimg = document.createElement('img'),
preview = document.querySelector('.img-preview');
ct.addEventListener('mouseover',function(e){
var imgsrc = e.target.getAttribute('data-img')
preimg.setAttribute('src', imgsrc)
preview.appendChild(preimg)
})
</script>```

事件

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

题目2： attachEvent与addEventListener的区别？

题目3： 解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？ 如何阻止默认事件？

题目6： 补全代码，要求：

推荐阅读更多精彩内容

题目3：解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？如何阻止默认事件？

题目6：补全代码，要求：