-
DOM0 事件和DOM2级在事件监听使用方式上区别
dom0事件无法给一个事件添加多个事件处理程序，后面的程序会覆盖后面的程序
dom2事件定义了addEventListener()和removeEventListener()用于指定和删除事件处理程序。所有的dom节点都包含这两种方法，并且他们接受3个参数。要处理的事件名、作为事件处理程序的函数和布尔值。最后，如果这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false表示在冒泡阶段调用事件处理程序。
但是，通过removeEventListener()函数来移除事件处理程序时，移除时 的参数必须与添加处理程序时用的参数相同，这也意味着通过addEventListener添加的匿名函数将无法移除。
-
addEventListener和attachEvent区别
- 参数的个数不同： addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段。
addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是在冒泡阶段（一般为了浏览器的兼容性都设置为冒泡阶段） - 第一个参数的意义不同。addEventListener的第一个参数是事件类型（比如click,load）,而attachEvent第一个参数指明的是事件处理函数（onclick,onload）
- 事件处理程序的作用域不同。addEventListener的作用域是元素本身，this指的是触发的元素，addachEvent事件处理程序会在全局变量中运行，this指的是window.
- 为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener添加会按照添加的顺序执行，而attachEvent添加多个事件处理程序时顺序无规律。
-
解释IE事件冒泡和DOM2事件传播机制
事件冒泡
事件处理器事件处理器就是当浏览器或者html某个元素触发某个事件时所执行的函数，事件处理器也叫事件监听器。常见的事件有load/click/mouseover/mouseout。
HTML元素是逐层嵌套的，对于这样的一个结构，如果父级元素和子级元素同时都有事件监听器，浏览器会如何处理呢？比如点击父级元素的时候alert('parentEvent')。当用户点击子元素对的时候，因为子元素嵌套在父级元素中，所以点击子元素也一定会触发父级元素的事件处理器，但是这牵扯到一个出发顺序的问题，到底是先弹出子元素的内容呢还是先弹出父元素的内容呢？这就是事件流讨论的内容。
在开发第四代浏览器的时候，ie4和netscape4给出了两个完全相反的思考方式。ie支持事件冒泡，而netscape支持事件捕获，那么什么是事件冒泡？什么又是事件捕获呢？
事件冒泡子元素嵌套在父元素内部，点击子元素的时候一定同时点击了父元素，这个时候，先触发子元素的事件处理器，然后再触发父元素的事件处理器，如果父元素的父元素还有处理器，就一直向上触发，一直到body元素。就像鱼吐泡泡一样，从水下向水面走，每向上走一层就会查看这一层有没有事件处理器，如果有的话就会触发，如果没有的话，就继续向上寻找，直到顶层的body，才结束寻找事件。
事件捕获则和事件冒泡正好相反，点击的时候从body往下找，如果父级元素有事件处理器就先触发父级元素的事件处理器，再向下一层，如果子级元素有的话就触发子级元素的事件处理器，直到这个点击位置的最底层，也就是我们通常说的target。事件捕获就好像一块石头从水面向水下沉一样，如果这一层有事件处理器，就触发，没有就继续向下沉，到下层再查看是否有事件处理器，有的话就触发，没有的话就继续向下，一直到最低层，这个石头就停止了。
在ie4浏览器中会先触发子元素的事件，然后再触发父元素的事件。但是在netscape4浏览器中则相反。
DOM2事件的传播机制
这样的两种事件流处理方式，也导致了浏览器兼容性的问题，为了解决这个问题，dom2级规范统一了事件流的过程，总共分为三个阶段：事件捕获、在目标元素上、事件冒泡。dom2级规范将事件冒泡和事件捕获都收入自己的囊中，所以你可以在一个元素上同时注册事件冒泡和事件捕获，也就是你可以选择父级元素事件处理器后触发，也可以先触发，甚至可以选择先触发，甚至可以选择先触发父级元素的捕获事件，载触发父级元素的冒泡事件。听上去很复杂，那么dom2是如何实现这个效果的呢？
定义了addEventListener()和removeEventListener()。有些人会说，我的事件处理器不是通过dom2级规范添加的，是通过dom0级规范添加的例如：
var outer=document.getElementById('outer'),
inner=document.getElementById('inner');
var outHandler=function(){
alert('outer')
}
var innerHandler=function(){
alert('inner')
}
outer.onclick=outerHandler;
inner.onclick=innerHandler;
那这种情况是先弹出outer还是先弹出inner呢？根据dom0规范，这种添加事件处理器的方法会在冒泡阶段r事件处理器。所以你想控制事件处理器是在冒泡阶段还是在捕获阶段触发，只能通过dom2级规范的方式来添加事件处理器，如果你很确定自己的事件处理器是在冒泡阶段才能触发，那么你也可以使用dom0级规范的方式。
-
如何阻止事件冒泡？ 如何阻止默认事件？
阻止事件冒泡
document.querySelector('.box').addEventListener('click',function(e){
e.stopPropagation()
console.log('haha')
})
阻止默认事件
document.querySelector('box').addEventListener('click',function(e){
e.preventDefault()
console.log('hello')
})
-
要求当点击每一个元素li时控制台展示该元素的文本内容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct=document.querySelector('.ct')
ct.addEventListener('click',function(e){
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 btn1=document.querySelector('#btn-add-start')
var btn2=document.querySelector('#btn-add-end')
var ct=document.querySelector('.ct')
var ipt=document.querySelector('.ipt-add-content')
btn1.addEventListener('click',function(){
var Li=document.createElement('li')
if(ipt.value){
Li.innerText=ipt.value
ct.insertBefore(Li,ct.firstChild)
}
})
btn2.addEventListener('click',function(){
var Li=document.createElement('li')
if(ipt.value){
Li.innerText=ipt.value
ct.appendChild(Li)
}
})
ct.addEventListener('click',function(e){
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 img=document.querySelector('.img-preview')
ct.addEventListener('mouseover',function(e){
var imagelink=e.target.getAttribute('data-img');
var image=document.createElement('img');
image.setAttribute('src','imagelink');
img.appendChild(image);
});
</script>
