一、 DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
javascrippt中DOM0事件是直接写在html里的事件，比如
<input onclick=alert('1')/>
DOM2事件是通过addEventListener（IE低版本是通过attachEvent）绑定的 ,比如
var btn=document.querySelector('#btn');
btn.addEventListener('事件类型',函数名)；
二者的区别主要是：
1、DOM0在HTML中书写很方便，但是存在两个缺点：
存在加载顺序问题，如果事件处理程序再html代码之后加载，用户可能在事件处理程序还未完成时就点击按钮之类的触发事件，存在时间差问题。
这样书写，html代码和js代码紧密耦合，维护不方便。
二、 attachEvent与addEventListener的区别？
attachEvent与addEventListener二者都是DOM2事件中的，通常会被t通同时应用于兼容不同版本的浏览器。
二者的区别是：
1、addEventListener()接受三个参数，第一个是要处理程序的事件类型，这个事件类型（事件名称）是字符串，但是不包括用于设置事件处理程序属性的前缀"on"，第二个参数是指定类型的事件发生时应该调用的函数。最后一个参数是布尔值，通常情况下这个参数会传递false，事件发生在冒泡阶段，如果为true则事件发生再捕获阶段
2、而attachEvent()在IE事件模型下不支持事件捕获，所以只有两个参数：事件类型和处理程序函数，且事件类型使用的是带"on"前缀的事件处理程序属性名。
3、addEventListener()对于相同的事件只会注册一次，即使多次的写了注册函数也只会成功注册一个，而attachEvent()允许将相同的事件处理函数注册多次。当特定的事件类型发生时，注册函数的调用次数和注册次数一样。
4、事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window
5、为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)。
三、解释IE事件冒泡和DOM2事件传播机制？
当事件发生在某个文档节点时，目标的事件处理程序就会被触发，此外目标的每个父节点也有机会处理该事件。
IE事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到不具体的元素。没有捕获阶段，只有目标阶段和事件冒泡阶段。
DOM2事件传播机制：DOM2事件规定事件流包括三个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。
四、如何阻止事件冒泡？ 如何阻止默认事件？
非IE浏览器中提供了一个事件对象 stopPropagation,可以阻止冒泡，IE浏览器提供了cancelBubble事件对象可以阻止冒泡，
在IE浏览器中通过returnvalue=false;阻止默认事件；非IE浏览器通过preventDefault()阻止默认事件
五、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct=document.querySelector('.ct');
ct.addEventListener('click',function(e){
if (e.target.tagName.toLowerCase()==='li') {
console.log(e.target.innerText);
}
})
</script>
六、 补全代码，要求：
当点击按钮开头添加时在<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.querySelector('.ct');
var iptAddContent=document.querySelector('.ipt-add-content');
var btnAddStar=document.querySelector('#btn-add-start');
var btnAddEnd=document.querySelector('#btn-add-end');
btnAddStar.addEventListener('click',function(){
var li=document.createElement('li');
if (iptAddContent.value) {
li.innerText=iptAddContent.value;
};
ct.insertBefore(li,ct.firstChild);
})
btnAddEnd.addEventListener('click',function(){
var li=document.createElement('li');
if (iptAddContent.value) {
li.innerText=iptAddContent.value;
};
ct.appendChild(li);
})
ct.addEventListener('click',function(e){
if (e.target.tagName.toLowerCase()==='li') {
console.log(e.target.innerText);
}})
</script>
七、 补全代码，要求：当鼠标放置在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 imgPreview=document.querySelector('.img-preview');
ct.addEventListener('mouseover',function(e){
if (e.target.tagName.toLowerCase()==='li') {
var dateImg=e.target.getAttribute('data-img');
imgPreview.innerHTML='';
}
})
</script>
八、 在 github 上创建个人项目，把视频里事件兼容的函数写法放入项目，在 Readme.md里描述项目(选做题目)
由于网络过于慢，而且git上东西较多，长时间未更新，一直下不下来，我就在这截图吧
