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

在DOM0级事件处理程序，事件名以'on'开头，如onclick，onload等

HTML元素支持事件，可以通过HTML元素的属性来指定

<input type="button" value="点我" onclick="alert("你真的点了")">
<input type="button" value="点我2" onclick="showSth()">
<script>
  function showSth(){
    alert("你真的点了")
  }
</script>
这种方式对于代码的行为与表现分离不太好，不便于维护

或者通过js添加DOM0事件处理程序
<script>
  var btn = document.getElementById("mybtn")
  btn.onclick = function showSth(){
    alert("你真的点了")
  }
  btn.onclick = function showSth(){
    alert("你真的点了2")
  }
//只显示２，１被２覆盖了，也就是说同样的事件只能添加一次
</script>

在W3C制定的DOM2规范中，其中的DOM 事件规范定义了两个方法：addEventListener()和removeEventListener()，分别用于添加事件处理程序和删除事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", showSth, false);
/*第三个参数布尔值指定事件是否在捕获或冒泡阶段执行。
默认false，事件句柄在冒泡阶段执行。
true 则表示事件句柄在捕获阶段执行*/

btn.removeEventListener("click", showSth, false);
/*第三个参数布尔值表示函数是否为事件捕获，默认false*/

dom2的优点
* 它允许给一个事件注册多个 listener
* 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
* 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效

2.attachEvent与addEventListener的区别？

attachEvent是IE浏览器的一个专有的标准，attachEvent() 不再被IE11支持。

btn.attachEvent("onclick", showSth);

他们的区别

• addEventListener能更精确的控制事件触发阶段，可以选择捕获还是冒泡，而attachEvent只能选择冒泡
• attachEvent的事件类似于DOM0中的，要加 on
• 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)

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

IE事件传播是冒泡机制，当检测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序

div→body→html→document

DOM2级事件传播包含三个阶段:

1. 捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
2. 到达事件的目标节点，执行目标节点的时间处理程序。
3. 事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。

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

阻止事件冒泡: event.stopPropagation()
阻止默认事件: event.preventDefault()

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
  var li = document.getElementByTagName("li");
  for(var i = 0; i < li.length; i++){
    li[i].onclick = 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 ul = document.querySelector('.ct');
  
  var startAdd = document.querySelector('#btn-add-start');
  var endAdd = document.querySelector('#btn-add-end');
  
  startAdd.addEventListener("click",function(){
  var content = document.querySelector('.ipt-add-content').value;
    if(content != ""){
      var li = document.createElement("li");
      li.innerText = content;
      ul.insertBefore(li,ul.children[0]);
    }
  })

   endAdd.addEventListener("click",function(){
   var content = document.querySelector('.ipt-add-content').value;
    if(content != ""){
      var li = document.createElement("li");
      li.innerText = content;
      ul.appendChild(li)
    }
  })

  ul.addEventListener("click",function(e){
    console.log(e.target.innerText);
  })
</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 ul = document.querySelector(".ct");
  var imgPre = document.querySelector(".img-preview");
  var img = document.createElement("img");
  imgPre.appendChild(img);

  ul.addEventListener("mouseover",function(e){
    var myimg = document.querySelector("img");
    var address = e.target.getAttribute("data-img");
    myimg.style.display = "block";
    myimg.setAttribute("src",address);
  })

  ul.addEventListener("mouseout",function(){
    var myimg = document.querySelector("img");
    myimg.style.display = "none";
  })
</script>