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

• DOM0级事件处理方式：
  通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。第四代web浏览器出现，至今为所有浏览器所支持。优点，简单且具有跨浏览器的优势。

• DOM2级事件处理方式
  DOM2级事件处理方式指定了，添加事件处理程序和删除事件处理程序的方法。分别是：
  addEventListener(eventName,func,isPuhuo);
  removeEventListener(eventName,func,isPuhuo);

• DOM3事件
  DOM浏览器中可能发生的事件有很多种，不同事件类型具有不同的信息，DOM3级事件规定了一下几种事件：
  UI事件，当用户与页面上的元素交互时触发；
  焦点事件，当元素获得或者失去焦点时触发；
  鼠标事件，当用户通过鼠标在页面上执行操作时触发；
  滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
  文本事件，当在文档中，输入文本时触发；
  键盘事件，当用户通过键盘在页面上执行操作时触发；
  合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
  变动事件，当底层Dom结构发生变化时触发；
  DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。
  DOM中的事件模拟（自定义事件）：
  DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
  返回的对象有一个initCustomEvent（）方法接收如下四个参数。
  1）type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
  2）bubble（布尔值）：标示事件是否应该冒泡；
  3）cancelable(布尔值)：标示事件是否可以取消；
  4）detail（对象）：任意值，保存在event对象的detail属性中；
  可以像分配其他事件一样在DOM中分派创建的自定义事件对象。

attachEvent与addEventListener的区别？

• 参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

• 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

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

• 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

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

• IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
• DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

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

• stopPropagation() 取消事件进一步捕获或冒泡
• preventDefault() 取消事件默认行为

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

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelectorAll('.ct li');
ct.forEach(function (node) {
node.addEventListener('click', function () {
console.log(this.innerText);
});
})
</script>

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

#补全代码，要求：

当点击按钮开头添加时在<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 list = document.querySelectorAll('.ct li');
var ct = document.querySelector('.ct');
var ipt = document.querySelector('.ipt-add-content');
var start = document.querySelector('#btn-add-start');
var end = document.querySelector('#btn-add-end');
ct.addEventListener('click', function (e) {
var target = e.target;
if (target.nodeName.toLowerCase() != 'li') return false;
console.log(target.innerText);
});

start.addEventListener('click', function () {
var str = ipt.value;
if (str.length == 0) return false;
addLi(str, ct, 'start', list);
});

end.addEventListener('click', function () {
var str = ipt.value;
if (str.length == 0) return false;
addLi(str, ct, 'end');
});

function addLi(str, element, position, list) {
var el = document.createElement('li');
el.innerText = str;
if (position == 'start') {
element.insertBefore(el, list[0]);
} else if (position == 'end') {
element.appendChild(el);
}
}
</script>

#补全代码，要求：当鼠标放置在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>
<div class="img-preview"></div>
<script>
  var ct = document.querySelector('.ct');
  var preview = document.querySelector('.img-preview');
      ct.addEventListener('click', function (e) {
        var target = e.target;
        if (target.nodeName.toLowerCase() != 'li') return false;
        var src = target.getAttribute('data-img');
        preview.innerHTML = '![](' + src + ')';
      });
</script>