1.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0事件是将一个函数赋值给一个事件处理程序属性：
var btn=document.getElementById("myBtn");
btn.omclick=function(){
alert(this.id);//"myBtn"
};
使用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的区别？
-
适应的浏览器版本不同
attachEvent方法适用于IEaddEventListener方法适用于Mozilla/Webkit -
参数个数不相同
addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段） -
第一个参数意义不同
addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload） -
事件处理程序的作用域不相同
addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window -
为一个事件添加多个事件处理程序时，执行顺序不同
addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律
3. 解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡
事件最开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的HTML页面为例：
<!DOCTYPE html>
<html>
<head>
<title>exp</title>
</head>
<body>
<div id="my">Click me</div>
</body>
</html>
如果你点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播：
（1）<div>
（2）<body>
（3）<html>
（4）document
也就是说，click事件首先在<div>元素上发生，而这个元素就是我们点击的元素。然后，click事件沿着DOM树向上传播，在每一级节点上都会发生，直至传播到document对象。过程如下图：
DOM2事件传播机制
"DOM2级事件"规定的时间溜包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。以前面简单的HTML页面为例。单击<div>元素会按照下图所示顺序触发事件。
4.如何阻止事件冒泡？ 如何阻止默认事件？
阻止默认事件
阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为
document.getElementsByTagName('a').onclick = function (e) {
e.preventDefault();
}
阻止事件冒泡
stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡
var handler = function (e) {
alert(e.type);
e.stopPropagation();
}
addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);
上述代码的body 的alert('Clicked body')不会i执行，因为内部的事件冒泡被阻止了。
5.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct= document.getElementsByClassName('ct');
console.log(ct);
ct[0].addEventListener("click",function(e){
var target= e.target;
if(target.tagName.toLowerCase() === "li"){
console.log(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.getElementsByClassName('ct');
var ipt = document.getElementsByClassName('ipt-add-content');
var star_btn = document.getElementById('btn-add-start');
var end_btn = document.getElementById('btn-add-end');
console.log(ipt);
ct[0].addEventListener("click", function(e) {
var target = e.target;
if (target.tagName.toLowerCase() === "li") {
console.log(target.innerText);
}
});
end_btn.addEventListener("click", function() {
if ((/\S/.test(ipt[0].value))) {
var node = document.createElement('li');
node.innerText = ipt[0].value;
ct[0].appendChild(node);
}
});
star_btn.addEventListener("click", function() {
if ((/\S/.test(ipt[0].value))) {
var node = document.createElement('li');
node.innerText = ipt[0].value;
ct[0].insertBefore(node, ct[0].firstChild);
}
});
</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>
var ct = document.querySelector('.ct');
var preview = document.querySelector('.img-preview');
var img_node = document.createElement('img');
preview.appendChild(img_node);
ct.addEventListener('mouseover',function(e){
var target = e.target;
if(target.tagName.toLowerCase()==="li"){
var img_data = target.getAttribute('data-img');
img_node.setAttribute('src',img_data);
}
});
ct.addEventListener('mouseout',function(e){
img_node.setAttribute('src','');
});
</script>
