题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0级的事件添加形式为
var btn = document.querySelector("#btn");
btn.onclick = function(){ //do something...}
console.log(this); // btn
使用DOM0级方法指定的事件处理程序被认为是元素的方法，此时事件处理程
序是在元素的作用域里中运行，所以此时this指向的是元素本身。而且这种添
加方式的缺陷是，只能存在一个处理程序，如果再次向同一个元素添加另外
一个处理程序，上一个处理程序会被覆盖。
DOM2级事件添加形式为
var btn = document.querySelector("#btn");
btn.addEventListener("click",handler);
function handler(){
// do sth ...
console.log(this); // btn
}
这样的添加方式比起DOM0级更灵活，它可以给一个同一个元素添加多个处理
事件。同时它的this也同样指向元素本身
题目2： attachEvent与addEventListener的区别？
attachEvent()是IE的事件处理程序，它与addEventListener的主要区别在于以下几点：
- 参数个数：attach由于只能运行在IE浏览器中，所以他的事件处理形式只能是事件冒泡，而addEventListener的时间处理形式可以是事件冒泡，也可以是事件捕获，所以他的参数中多了一个boolean值，当为true时，为事件捕获，false时为事件冒泡.
- 事件名：attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on.
- 作用域：在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
- 事件处理程序执行顺序：通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行； 对于addEventListener的事件处理程序则是按照添加顺序执行。
题目3： 解释IE事件冒泡和DOM2事件传播机制？
事件冒泡模型
- IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。
事件捕获模型
事件捕获的流程与事件冒泡截然相反，当监测到一个事件发生时，事件会从window开始向子级传递，直到传递到目标元素停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。
DOM事件流
- 而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在div上发生，被看做冒泡的一部分。
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
- 对于非IE浏览器
btn.addEventListener("click",function(e){
e.stopPropatgation(); //阻止事件冒泡或事件捕获
e.preventDefault() // 阻止默认事件
})
兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包
含一个stopPropagation()方法，可以组织事件的进一步捕获或冒泡（取决于添
加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行
为。（在事件处理程序里使用return false也可以）
- 对于IE浏览器
btn.attachEvent("onclick",function(e){
e.cancelBubble = true; // 阻止事件冒泡
e.returnValue = true; // 阻止默认事件
对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为
true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取
消事件的默认行为。
})
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var btn = document.querySelector("button");
btn.addEventListener("click",function(e){
console.log(e);
});
var ct = document.querySelector(".ct");
ct.addEventListener("click",function(e){
console.log(e.target.innerText);
});
</script>
题目6： 补全代码，要求：
当点击按钮开头添加时在这里是元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 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 btnStart = document.querySelector("#btn-add-start");
var btnEnd = document.querySelector("#btn-add-end");
var ct = document.querySelector(".ct");
btnStart.addEventListener("click",function(e){
var li1 = document.querySelector("li:first-child");
var li = document.createElement("li");
if(getValue()){
li.innerText = getValue();
ct.insertBefore(li,li1);
}
});
btnEnd.addEventListener("click",function(e){
var li = document.createElement("li");
if(getValue()){
li.innerText = getValue();
ct.appendChild(li);
}
});
ct.addEventListener("click",function(e){
console.log(e.target.innerText);
});
function getValue(){
var iptval = document.querySelector(".ipt-add-content");
return iptval.value;
}
</script>
题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<style>
li,
ul {
list-style: none;
padding: 0;
}
.img-preview {
position: relative;
border: 1px solid ;
width: 350px;
height: 250px;
margin: 10px auto;
overflow: hidden;
}
.ct {
width: 350px;
margin: 10px auto;
}
li:hover {
background: #eee;
}
img {
position: absolute;
width: 350px;
display: none;
animation: slide 1.5s;
}
@keyframes slide{
from{opacity: .5;}
to{opacity: 1;}
}
img.hover {
display: inline-block;
}
</style>
<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 li1 = document.querySelector("li:first-child");
console.log(li1.getAttribute("data-img")[0]);
ct.addEventListener("mouseover",function(e){
for(var k=0;k<3;k++){
console.log(1);
document.querySelectorAll("img")[k].classList.remove("hover");
console.log(2);
}
var i = e.target.getAttribute("data-img")[0];
var imghover = document.querySelector("img:nth-child("+i+")");
imghover.classList.add("hover");
});
</script>
