1. DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
- 添加方式
- DOM0级事件是通过内联方式
<div onclick="console.log()">...</div>或是在JS中写onclick=function( ){ }函数进行添加 - DOM2级事件通过
addEventListener来添加事件监听，接受三个参数：事件类型、事件处理方法、布尔值（true表示事件捕获阶段响应，false表示事件冒泡阶段响应，默认false）。例：btn.addEventListener('onclick',function( ){ },false)
- DOM0级事件是通过内联方式
- 删除事件
- 删除DOM0级方法制定的事件处理程序，将事件处理程序的值设置为null即可：
btn.onclick=null - 删除DOM2级方法制定的事件处理程序：removeEventListener
但是该方法不能移除addEventListener添加的匿名函数
- 删除DOM0级方法制定的事件处理程序，将事件处理程序的值设置为null即可：
btn.addEventListener('click',function(){console.log('hello')},false);
btn.removeEventListener('click',function(){console.log('hello')},false);//没有效果
//使用这样的写法才行
function handle(){
console.log('hello')
}
var btn=document.querySelector('#btn');
btn.addEventListener('click',handle,false);
btn.removeEventListener('click',handle,false)
- 多个事件处理程序：DOM0不支持多个事件处理程序，后面的会覆盖前面的，只能一个事件处理程序对应一个函数；DOM2级事件处理程序可以添加多个事件。
- this：DOM0级事件中
this对象指向全局对象；DOM2级事件this指向Element节点 - DOM0级事件只能在冒泡阶段进行监听器触发；DOM2级事件可以通过参数选择在冒泡阶段或是捕获阶段进行监听触发
- 兼容性：DOM0级事件支持所有浏览器；DOM2级事件要求浏览器为IE8以上
2. attachEvent与addEventListener的区别
- 浏览器支持情况不同
IE9以下的浏览器不支持addEventListener - 参数个数不同
addEventListener有三个参数：type,handle,(true/false)
attachEvent只要两个参数：type,handle
因为attachEvent监听的事件只能发生在冒泡阶段，所以为了兼容性，addEventListener的第三个参数默认为false - 第一个参数不同
addEventListener的第一个参数是方法，如click,scroll
attachEvent第一个参数是事件名称，如onclick,onscroll - 事件处理程序的作用域不同
DOM2级事件中，addEventListener作用域在所属的元素内进行，此时this指向这个元素
使用attach方式时，事件处理程序在全局作用域进行，此时this指向window - 执行顺序不同
addEventListener会按照添加顺序执行
attachEvent添加多个时间处理程序时顺序无规律（在IE9以下，添加方法较少时，各方法按添加顺序的反顺序进行，添加方法多时则乱序进行）
3. 解释IE事件冒泡和DOM2事件传播机制
-
IE事件冒泡
传播顺序是由里到外，即时间开始时由最具体的元素，文档中嵌套最深的那个节点接收，然后逐级向上传播到window(document)
事件冒泡.png - DOM2事件传播机制
分为三个阶段：- 事件捕获阶段。即由最顶层元素（一般是从window元素开始，有的浏览器是从document开始）开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件
- 处于目标阶段。检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件
-
时间冒泡阶段。从目标元素出发，向外层元素冒泡，最后到达顶层（window或者document），依次执行绑定在其上的事件
DOM2级事件.png
4. 如何阻止事件冒泡？如何阻止默认事件
//阻止冒泡
function stopPropagation(e){
if (e&&e.stopPropagation){
e.stopPropagation();//W3C标准
}else{
window.event.cancelBubble=true;//IE浏览器
}
}
//阻止默认事件
function preventDefault(e){
if (e&&e.preventDefault){
e.preventDefault()://W3C标准
}else{
window.event.returnValue=false;//IE浏览器
}
}
5. 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
3.png
var ct=document.querySelector('.ct');
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase()==='li'){
console.log(e.target.innerText)
}
})
6. 补全代码
要求：
- 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
-
当点击每一个元素li时控制台展示该元素的文本内容。
4.png
<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>
function $(node) {
return document.querySelector(node);
}
var ct = $('.ct');
var ipt = $('.ipt-add-content');
var btnstart = $('#btn-add-start');
var btnend = $('#btn-add-end');
ct.addEventListener('click', function (e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
});
btnstart.addEventListener('click', function () {
var newNode = document.createElement('li');
if (ipt.value.length !== 0) {
newNode.innerText = ipt.value;
ct.insertBefore(newNode, ct.firstChild);
}
});
btnend.addEventListener('click', function () {
var newNode = document.createElement('li');
if (ipt.value.length !== 0) {
newNode.innerText = ipt.value;
ct.appendChild(newNode);
}
});
</script>
</script>
7. 补全代码
要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">鼠标放置查看图片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
function $(node){
return document.querySelector(node);
}
var ct=$('.ct');
var preview=$('.img-preview');
var newImg=document.createElement('img');
ct.addEventListener('mouseover',function(e){
if(e.target.tagName.toLowerCase()==='li'){
newImg.src=e.target.getAttribute('data-img');
preview.appendChild(newImg);
}
});
</script>
