题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0事件是将一个函数赋值给一个事件处理程序属性：
var btn=document.getElementbyId("myBtn");
btn.omclick=function(){
alert(this.id);
}
使用DOM0级方法指定的事件处理程序被认为是元素的方法。此时事件处理程序是在元素的作用域中运行，程序中的this引用当前元素；DOM0的优势在于简单和兼容性好，劣势在于只能存在一个处理程序，如果再次向同一个元素添加另一个处理程序，上一个处理程序会被覆盖。
DOM2事件定义了两个方法，addEventListener()和removeEventListener(),用于处理指定和删除事件处理程序的操作，所有DOM节点都包含这两个方法，并且它们都接受三个参数：处理事件名、处理事件程序的函数、布尔值；布尔值是true表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序：
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},flase);
与DOM0方法一样，这里的处理程序也是在其依附的元素作用域中运行。DOM2方法的好处是可以添加多个事件处理程序。
题目2： attachEvent与addEventListener的区别？
1.attachEvent与addEventListener的区别
支持的浏览器不同。attachEvent在IE9以下的版本中受到支持。其它的都支持addEventListener。
参数不同。addEventListener第三个参数可以指定是否捕获，而attachEvent不支持捕获。
事件名不同。attachEvent第一个参数事件名前要加on，比如el.attachEvent('onclick', handleClick)。
this不同。
2attachEvent 的事件绑定 attachEvent的this总是window 例如：
el.attachEven("onclick" function)(){
alert(this)
}
执行后输出的 对话框就是（object window）
1.attachEvent添加的事件只能在冒泡阶段处理,addEventListener可以通过参数
来决定处理程序是在冒泡阶段还是在捕获阶段处理.
2.第一个参数不同,attachEvent第一个参数是on....,比如onclick,而
addEventListener是click,没有on.
3.this的指代不同,在attachEvent的函数中this指的是window,而在addEventListener,
this指的是被监听的元素.
4.为一个事件添加多个事件处理程序时,执行顺序不同:addEventListener会按照添加的
顺序执行,attachEvent添加多个事件处理程序时,在执行时没有规律.
题目3： 解释IE事件冒泡和DOM2事件传播机制？
1 IE事件的传播机制只有冒泡阶段，即从目标元素向父元素传播一直传播到window停止，当传播的过程中如果监听到了相同的事件类型酒会一并触发，即从最具体的元素开始触发，一直到最外层的元素.
2 DOM2事件传播机制包括事件的，从window开始 -> 捕获阶段 －> 到达目标元素 -> 冒泡阶段 -> 再到达最外层的 window，并且在addEventListener(type,function(){},true(为捕获阶段)/false(default,为冒泡阶段触发))。
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
如何阻止事件冒泡？
<script>
function stopPropagation(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBUbble = true;
}
}
</script>
如何阻止默认事件？
<script>
function preventDefault(){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
</script>
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
答案
<script>
var ct = document.querySelectorAll('li');
for(var i = 0;i<ct.length;i++){
ct[i].addEventListener('click',function(){
console.log(this.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>
//你的代码
</script>
答案
<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 = $('.ct');
var cont = $('.ipt-add-content');
var addStart = $('#btn-add-start');
var addEnd = $('#btn-add-end');
//监听事件添加元素
addStart.addEventListener('click',addContent);
addEnd.addEventListener('click',addContent);
function addContent(e){
//字符串长度小于等于0，return
if(cont.value.length <= 0 ) return;
var li = document.createElement('li');
li.innerText = cont.value;
if(this.id === "btn-add-start"){
var firstNode = ct.firstElementChild;
ct.insertBefore(li,firstNode);
}
if(this.id === "btn-add-end"){
ct.appendChild(li);
}
}
//点击元素显示文本内容。事件代理
ct.addEventListener('click',function(e) {
console.log(e.target.innerText)
})
function $ (obj){
return document.querySelector(obj);
}
function $$ (array){
return document.querySelectorAll(array);
}
</script>
题目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>
答案
<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 = $('.ct');
var preview = $('.img-preview');
ct.addEventListener('mouseover',function(e){
//移除图片还原默认状态
if(preview.children.length > 0){
[].forEach.call(preview.children,function(node){
preview.removeChild(node);
})
}
//鼠标悬浮指定位置显示对应图像
if(e.target.tagName.toLowerCase() === 'li'){
var image = document.createElement('img');
image.src = './img/' + e.target.dataset.img;
preview.appendChild(image);
}
})
function $ (cls){
return document.querySelector(cls);
}
function $$(cls){
return document.querySelector(cls);
}
</script>
