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

• DOM0级在事件监听上的使用方式是先取出元素，并为其属性添加一个方法，且一个事件监听（处理程序）只能对应一个处理函数，DOM0级对浏览器的兼容性较强。
  语法例子：

var node=document.getElementById("ID");
node.onclick=function(){}

• DOM2级存在两个方法，用于处理制定和删除事件处理程序的操作（addEventListener和removeEventListener），接受三个参数：事件名称、事件处理程序的函数和布尔值，布尔值为false表示在事件冒泡阶段调用事件处理程序，可同时绑定几个事件，且不会被覆盖，但兼容性较弱。

var node = document.querySelector('id')
node.

题目2： attachEvent与addEventListener的区别？

在添加事件处理程序事addEventListener和attachEvent主要有几个区别：

• 参数个数不相同，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理。
• 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）。
• 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window。
• 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)。

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

• IE事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
  IE 5.5: div -> body -> document
  IE 6.0: div -> body -> html -> document
  Mozilla 1.0: div -> body -> html -> document -> window

• DOM2事件传播机制：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

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

• 阻止事件冒泡：stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。语法例子：

var node = document.getElemnetById(‘id’);
node.addEventListener('click',function(e){e.stopPropagation()})

• 阻止默认事件：preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为。语法例子：

var node = document.querySelector('#id');
node.addEventListener('click',function(e){e.preventDefault()})

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var ul = document.querySelector('.ct')
ul.addEventListener('click',function(e){
   if(e.target.tagName.toLowerCase() === 'li'){
     console.log(e.target.innerText);
     }
   })
</script>

demo

题目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')
ul.addEventListener('click',function(e){
   if(e.target.tagName.toLowerCase() === 'li'){
     console.log(e.target.innerText);
     }
   })
var start = document.querySelector('#btn-add-start')
var startli = document.querySelector('.ct li')
var end = document.querySelector('#btn-add-end')
var input = document.querySelector('.ipt-add-content')
start.addEventListener('click',function(e){
  var newelm = document.createElement('li')
  if(/^\S+$/.test(input.value)){
    newelm.innerText = input.value
    ul.insertBefore(newelm,startli)
  }
})
end.addEventListener('click',function(e){
  var newelm = document.createElement('li')
  if(/^\S+$/.test(input.value)){
    newelm.innerText = input.value
    ul.appendChild(newelm)
  }
})
</script>

demo

题目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');
var img = document.querySelector('.img-preview');
ct.addEventListener('mouseover',function(e){ 
  if(e.target.tagName.toLowerCase() === 'li'){
  var attribute = e.target.getAttribute('data-img');
  img.innerHTML = '![]('+attribute+')';
  }
});
</script>

demo

题目8： 写一篇博客，讲解事件相关知识点，如事件冒泡、捕获、代理、兼容写法等(选做题目)