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

DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数，就可以指定事件处理程序。一个事件只能绑定一次，并且新方法会覆盖老方法。例如btn.onclick=function(){}
DOM2级事件监听定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener、removeEventListener。所有的DOM节点都包含这两个方法，并且它们都接受三个参数：事件类型、事件处理方法、布尔参数。例如addEventListener、removeEventListener。可以选择按照冒泡的顺序处理还是捕获的顺序处理。

题目2： attachEvent与addEventListener的区别？

参数的区别：addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数布尔值可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理，默认false在冒泡阶段。true是在捕获阶段。

第一个参数区别，attachEvent第一个参数加on,比如onclick，addEventListener不加on，比如click.

this指向不同，也就是作用域不一样，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window

当为事件添加多个事件处理时，addEventListener按顺序执行，而attachEvent不按顺序执行，如果事件少，倒着执行，如果事件多，执行顺序毫无规律。

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

IE事件冒泡，从最里面的节点开始逐渐往上传，比如选中一个div的话，那么，事件的传递顺序就是div------body------html-----document

DOM2传播机制是先由外往内传，再由内传出去。比如选中一个div,那么事件的传播顺序是document-----html-------body------div-----body---------html--------document。

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

阻止事件冒泡，如下代码：

btn.addEventListener('click',function(e){
  e.stopPropagation();
  console.log("abc");//这个仍然会执行，但是不会再冒泡到btn的父节点上。
})



var site=document.querySelector("#site");
site.addEventListener('click',function(e){
  e.preventDefault();//假设由一个id为site的A标签，设置了这个之后，a标签的默认行为会被取消，比如点一次刷新页面，或者点一次回到页面头部。
});

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

var show=document.querySelectorAll(".ct");
show[0].addEventListener('click',function(e){
  console.log(e.target.innerText);
});

题目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 startAdd=document.querySelector("#btn-add-start");
var endAdd=document.querySelector("#btn-add-end");
var addText=document.querySelectorAll(".ipt-add-content")[0];
var list=document.querySelectorAll(".ct")[0];
startAdd.addEventListener('click',function(){
  var node=document.createElement("li");
  node.innerText=addText.value;
  if(node.innerText!==""){
     list.insertBefore(node,list.firstChild);
  }
});
endAdd.addEventListener('click',function(){
  var node1=document.createElement("li");
  node1.innerText=addText.value;
  if(node1.innerText!==""){
     list.appendChild(node1);
  }
});
</script>

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

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
//你的代码
  var list=document.querySelector('.ct'),
    getLi=list.querySelectorAll('li'),
    preview = document.querySelector('.img-preview');
   for (var i = 0; i < getLi.length; i++) {
      getLi[i].addEventListener('mouseenter',function(e){
      var data=e.target.getAttribute('data-img');
      preview.innerHTML = '<img src="' + data + '">';
    })  

};

</script>