DOM0级事件和DOM2级在事件监听使用方式上有什么区别？
DOM0级事件
移除属性只需将属性置空
该方式不会做同一对象的同类型事件绑定累加，即后者覆盖前者
事件处理程序会在事件流的冒泡阶段被处理
所有的浏览器都支持DOM0 级事件处理程序DOM2级事件
定义了两个方法，用来指定和删除事件处理程序：addEventListener() 和 removeEventListener()。这两个方法都接受3个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值，这个布尔值参数如果为true表示在捕获阶段调用事件处理程序，为false表示在冒泡阶段调用事件处理程序，默认设为false。通过addEventListener添加的事件处理程序只能通过removeEventListener()来移除
可以为同一个元素绑定多个事件处理程序，绑定的事件处理程序会按照它们添加的先后顺序依次触发
IE9+、Firefox、Safari、Chrome和Opera都支持DOM2 级事件处理程序
attachEvent与addEventListener的区别？
- attachEvent
IE8及以下版本使用
事件处理程序中的this指向全局对象window
要处理的事件名前需要加'on'
处理程序会在冒泡阶段调用 - addEventListener
IE9+、Firefox、Safari、Chrome和Opera都支持
事件处理程序中的this引用当前元素
通过设置第三个参数为true或false可以设定在捕获阶段还是冒泡阶段调用事件处理程序
解释IE事件冒泡和DOM2事件传播机制？
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
DOM2级事件：首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
如何阻止事件冒泡？ 如何阻止默认事件？
- DOM中的事件对象：
preventDefault()方法用来取消事件默认行为
stopPropagation()方法用来阻止事件进一步捕获或冒泡
return false 退出执行, return false 之后的所有触发事件和动作都不会被执行 - IE8及以下中的事件对象
returnValue属性用来设置事件的默认行为。默认值为true，当设置为false时，就会取消事件的默认行为。
cancelBubble属性用来取消事件冒泡。默认值为false，当设置为true时，就会阻止事件冒泡。
<!-- 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容 -->
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var liNodes= document.querySelectorAll('.ct li')
var ct= document.querySelector('.ct')
ct.addEventListener('click',function(e){
var target= e.target
console.log(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 liNodes= document.querySelectorAll('.ct li')
var addS=document.querySelector('#btn-add-start')
var addE=document.querySelector('#btn-add-end')
var ct=document.querySelector('.ct')
var ipt=document.querySelector('.ipt-add-content')
ct.addEventListener('click',function(e){
var target= e.target
console.log(target.innerText)
})
addS.addEventListener('click',function(){
var text= ipt.value
if(text !=""){
var node= document.createElement('li')
node.innerText=ipt.value
ct.insertBefore(node,ct.firstChild)}
})
addE.addEventListener('click',function(){
var text= ipt.value
if(text !=""){
var node= document.createElement('li')
node.innerText=ipt.value
ct.appendChild(node)}
})
</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'),
imgP=document.querySelector('.img-preview')
ct.addEventListener('mouseover',function(e){
var dataImg=e.target.getAttribute('data-img')
imgP.innerHTML=''
})
ct.addEventListener('mouseout',function(){
imgP.innerHTML=''
})
</script>
