1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
- 使用DOM0级方法指定的事件处理程序被认为是元素的方法，这种添加方式的缺陷是，只能存在一个处理程序，如果再次向同一个元素添加另外一个处理程序，上一个处理程序会被覆盖。
- DOM2级添加方式比起DOM0级更灵活，它可以给一个同一个元素添加多个处理事件。
2： attachEvent与addEventListener的区别？
- 事件名：attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on。
- 作用域：在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
- 事件处理程序执行顺序：通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行； 对于addEventListener的事件处理程序则是按照添加顺序执行。
3： 解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。
而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在目标上发生，被看做冒泡的一部分。
4：如何阻止事件冒泡？ 如何阻止默认事件？
兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包含一个stopPropagation()方法，可以阻止事件的进一步捕获或冒泡（取决于添加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行为。（在事件处理程序里使用return false也可以）
对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取消事件的默认行为。
5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.getElementsByTagName('ul')[0];
ct.addEventListener('click', 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 ct = document.getElementsByTagName('ul')[0];
var addStart = document.getElementById('btn-add-start');
var addEnd = document.getElementById('btn-add-end');
var content = document.getElementsByClassName('ipt-add-content')[0];
addStart.addEventListener('click', function(e) {
var el = document.createElement('li');
if (content.value) {
el.innerText = content.value;
ct.insertBefore(el, ct.firstChild);
} else {
alert('请输入内容!')
}
})
addEnd.addEventListener('click', function(e) {
var el = document.createElement('li');
if (content.value) {
el.innerText = content.value;
ct.appendChild(el);
} else {
alert('请输入内容!')
}
})
ct.addEventListener('click',function(e) {
console.log(e.target.innerText);
})
</script>
7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490700647573&di=1f247781c941906317eef14024b7396d&imgtype=0&src=http%3A%2F%2Fimage.ajunews.com%2Fcontent%2Fimage%2F2014%2F09%2F17%2F20140917102600112243.jpg">鼠标放置查看图片1</li>
<li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490700647573&di=fea49a6d74ddbc065e519a24e8bfefc8&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140103%2F14882888_144924904000_2.jpg">鼠标放置查看图片2</li>
<li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490700647570&di=caa67ffa9858aa861a206fa903f1de0b&imgtype=0&src=http%3A%2F%2Fimg.hao224.com%2F2016%2F06%2F04%2Flashou_shenyang_215751_2706.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.getElementsByTagName('ul')[0];
var imgPreview = document.getElementsByClassName('img-preview')[0];
ct.addEventListener('mouseover', function(e) {
if (imgPreview.children[0]) {
imgPreview.removeChild(imgPreview.children[0]);
}
var el = document.createElement('img');
el.src = e.target.getAttribute('data-img');
imgPreview.appendChild(el);
})
</script>
