22. 事件

1. DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

• 添加方式
  • DOM0级事件是通过内联方式<div onclick="console.log()">...</div>或是在JS中写onclick=function( ){ }函数进行添加
  • DOM2级事件通过addEventListener来添加事件监听，接受三个参数：事件类型、事件处理方法、布尔值（true表示事件捕获阶段响应，false表示事件冒泡阶段响应，默认false）。例：btn.addEventListener('onclick',function( ){ },false)
• 删除事件
  • 删除DOM0级方法制定的事件处理程序，将事件处理程序的值设置为null即可：btn.onclick=null
  • 删除DOM2级方法制定的事件处理程序：removeEventListener
    但是该方法不能移除addEventListener添加的匿名函数

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>