题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这 种为事件处理程序赋值的方法是在第四代 Web 浏览器中出现的，而且至今仍然为所有现代浏览器所支 持。原因一是简单，二是具有跨浏览器的优势。要使用 JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。但是，后添加的事件处理程序会覆盖掉之前添加的处理程序，只能有一个是有效的。
DOM2的事件监听
DOM2中通过addEventListener()添加事件监听，通过removeEventListener()来移除事件监听
var btn=document.quertSelector(".mybtn")
btn.addEventListener('click',showMessage,false)
btn.removeEventListener('click',showMessage,false)
实现了js和html分离，也可以绑定多个元素
btn.addEventListener('click',showMessage,false)
btn.addEventListener('click',showMessage2,false)
btn.addEventListener('click',showMessage3,false)
题目2： attachEvent与addEventListener的区别？
attachEvent() 作用于IE中， 接受两个参数:事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡，所以通过 attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
attachEvent()的第一个参数是on+参数 ，在使用 attachEvent()方 法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。
addEventListener() 接受三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获 阶段调用事件处理程序;如果是 false，表示在冒泡阶段调用事件处理程序。
题目3： 解释IE事件冒泡和DOM2事件传播机制？
- IE 的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深 的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。以下面的 HTML 页面为例:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果你单击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播: (1) <div>
(2) <body>
(3) <html>
(4) document
也就是说，click 事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，click 事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。图 13-1 展示了事件 冒泡的过程。
图 13-1
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒 泡会跳过<html>元素(从<body>直接跳到 document)。IE9、Firefox、Chrome 和 Safari 则将事件一直 冒泡到 window 对象。
-
DOM2事件“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首 先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶 段，可以在这个阶段对事件做出响应。以前面简单的 HTML 页面为例，单击<div>元素会按照图13-3所 示顺序触发事件。
image.png
在 DOM 事件流中，实际的目标(<div>元素)在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div> 上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生， 事件又传播回文档。
多数支持 DOM 事件流的浏览器都实现了一种特定的行为;即使“DOM2 级事件”规范明确要求捕 获阶段不会涉及事件目标，但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都会在捕获阶段触 发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
DOM中用stopPropagation()阻止事件冒泡，用preventDefault()阻止默认事件，在IE中可以设置cancelBubble为true阻止冒泡，设置returnValue为false阻止默认事件
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
方法一：
var ele = document.querySelectorAll(".ct li");
ele.forEach(function(e){
console.log(e);
e.addEventListener("click", function(){
console.log(this.innerText);})})
方法二：
var list = document.getElementsByClassName('ct')[0].getElementsByTagName("li");
for(var i = 0;i < list.length; i++){
list[i].addEventListener("click",function(){
console.log(this.innerText);
})
}
方法三：
var element = document.querySelector(".ct");
element.addEventListener("click",function(e){
var target = e.target;
console.log(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>
//你的代码
</script>
var firstLi = document.querySelector(".ct li");
var input = document.querySelector(".ipt-add-content");
var ct = document.querySelector(".ct");
var lastButton = document.querySelector("#btn-add-end")
ct.addEventListener("click",function(e){
var target = e.target;
console.log(target.innerText);
});
var firstButton = document.querySelector("#btn-add-start");
firstButton.addEventListener("click", function(){
if(!input.value){ }
else{
var newLi = document.createElement("li");
newLi.innerText = input.value;
ct.insertBefore(newLi,firstLi);
}});
lastButton.addEventListener("click",function(){
if(!input.value){}
else{
var newli = document.createElement("li");
newli.innerText = input.value;
ct.appendChild(newli);
}
})
题目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>
//你的代码
</script>
var imgPreview = document.getElementsByClassName("img-preview")[0];
var ct = document.getElementsByClassName("ct")[0];
ct.addEventListener("mouseover",function(e){
var target = e.target;
console.log(e.target);
var dataImg = target.getAttribute("data-img");
imgPreview.innerHTML = '<img src ="'+ dataImg +'">'
