一、DOM0 事件和 DOM2 级在事件监听使用方式上有什么区别？
1. DOM0 级事件处理
DOM0 级事件处理，事件名以on开头，如onclick、onload等。
- 在 HTML 上进行事件处理
<button onclick="clickFnc()">点击</button>
<script>
function clickFnc(){
alert('Hi');
}
</script>
通过这种方式添加事件，会使 HTML 和 JS 耦合在一起，不容易维护和 bug 排查。
- 通过 JS 添加事件
<button id="btn">点击</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function (){
alert('Hi');
};
</script>
要添加一个事件，就需要先获得对应的 DOM 元素，然后把事件绑定在元素上面。DOM0 级在同一个元素上绑定同一个事件会覆盖，而清除事件只需要
btn.onclick = null即可。
2. DOM2 级事件处理
W3C标准为 DOM2 级事件规范添加了两个方法
addEventListener()removeEvenListener()，分别用于添加事件和移除事件。
<button id="btn">点击</button>
<script>
var btn = document.getElementById('btn');
btn.addEvenListener('click', clickFnc, false);
function clickFnc(){
alert('Hi');
}
</script>
移除事件
btn.removeEventListener("click", clickFnc, false);
参考： JavaScript DOM文档事件－DOM0、DOM2级事件处理程序
二、attachEvent 与 addEventListener 的区别？
在早期 IE 浏览器中（如： IE 8）是不支持新标准的 addEvenlistener 方法的，但是提供了 attachEvent 方法来代替，所以这是 IE 兼容问题。不过现在基本不再考虑这个兼容了，另外 IE 使用 detachEvent 来解绑事件。以下详细说说两者的区别。
1. 事件机制
在老版的 IE 中，只支持 DOM0 级事件，也就是说，只有事件的冒泡阶段。而addEventListener()是 DOM2 级事件，是一个由事件捕获 => 目标事件 => 事件冒泡 这样的一个事件流。这也是为什么attachEvent() 没有第三个参数的原因。
2. 事件对象
在attachEvent()绑定的函数中，并没有把对应的目标事件对象传进来，所以只能通过window.event来访问这个事件对象。
3. 事件中的 this
在attachEvent()绑定的函数中，没有把事件触发的对象作为 this 传进函数，所以在attachEvent()中直接使用 this 的话，是全局window对象。
三、解释 IE 事件冒泡和 DOM2 事件传播机制？
- 事件冒泡
事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
- DOM2 事件传播机制
DOM2 级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
四、如何阻止事件冒泡？ 如何阻止默认事件？
要阻止事件冒泡，可以对传进来的事件执行stopPropagation()方法，这个方法取消事件进一步捕获或冒泡，如
document.querySelector(element).addEventListener('click',function(e){
e.stopPropagation()
//这里开始阻止后续的冒泡或者捕获了
console.log('xxx')
})
要取消默认事件，如点击<a>后的默认跳转行为或者是<form>表单的提交行为，可以对事件执行preventDefault()方法。
另外，直接使用return false可以粗暴的阻止事件冒泡、捕获和默认事件。
五、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
结果
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var lists = document.querySelectorAll('.ct li');
lists.forEach((item, index, arr) => {
item.addEventListener('click', function() {
console.log(this.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>
//你的代码
</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 input = document.querySelector('.ipt-add-content')
var addStartBtn = document.querySelector('#btn-add-start')
var addEndBtn = document.querySelector('#btn-add-end')
var ct = document.querySelector('.ct')
var lists = ct.querySelectorAll('li')
//开头添加
addStartBtn.addEventListener('click', function(){
if(input.value){
var newLi = document.createElement('li')
newLi.innerText = input.value
//为新添加的元素添加事件
consoleText(newLi)
ct.insertBefore(newLi, lists[0])
}else {
alert("输入不能为空！")
}
})
//结尾添加
addEndBtn.addEventListener('click', function(){
if(input.value){
var newLi = document.createElement('li')
newLi.innerText = input.value
//为新添加的元素添加事件
consoleText(newLi)
ct.appendChild(newLi)
}else {
alert("输入不能为空！")
}
})
//添加点击打印文字事件
function consoleText(element){
element.addEventListener('click', function(){
console.log(this.innerText)
})
}
//为初始的 li 添加点击事件
lists.forEach((item, index, arr) => {
consoleText(item)
})
</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>
//你的代码
</script>
结果
<ul class="ct">
<li data-img="https://img6.bdstatic.com/img/image/public/bizhi112.png">鼠标放置查看图片1</li>
<li data-img="http://img05.tooopen.com/images/20160121/tooopen_sy_155168162826.jpg">鼠标放置查看图片2</li>
<li data-img="http://img06.tooopen.com/images/20160728/tooopen_sy_172881922881.jpg">鼠标放置查看图片3</li>
</ul>
<img src="" alt="图片" class="img-preview">
<script>
var lists = document.querySelectorAll('.ct li')
var img = document.querySelector('.img-preview')
lists.forEach((item) => {
item.addEventListener('mouseover', function(){
img.src = this.getAttribute('data-img')
})
})
</script>
