进阶任务9（主线任务）：事件

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这 种为事件处理程序赋值的方法是在第四代 Web 浏览器中出现的，而且至今仍然为所有现代浏览器所支 持。原因一是简单，二是具有跨浏览器的优势。要使用 JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。但是，后添加的事件处理程序会覆盖掉之前添加的处理程序，只能有一个是有效的。

DOM2的事件监听
DOM2中通过addEventListener()添加事件监听，通过removeEventListener()来移除事件监听

var btn=document.quertSelector(".mybtn")
btn.addEventListener('click',showMessage,false)
btn.removeEventListener('click',showMessage,false)

实现了js和html分离，也可以绑定多个元素

btn.addEventListener('click',showMessage,false)
btn.addEventListener('click',showMessage2,false)
btn.addEventListener('click',showMessage3,false)

题目2： attachEvent与addEventListener的区别？
attachEvent() 作用于IE中， 接受两个参数:事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡，所以通过 attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
attachEvent()的第一个参数是on+参数 ，在使用 attachEvent()方 法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。
addEventListener() 接受三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获 阶段调用事件处理程序;如果是 false，表示在冒泡阶段调用事件处理程序。

题目3： 解释IE事件冒泡和DOM2事件传播机制？

• IE 的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深 的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。以下面的 HTML 页面为例:

    
    
        
    
    
        
Click Me
    
    

如果你单击了页面中的

元素，那么这个 click 事件会按照如下顺序传播: (1)

(2)
(3)
(4) document
也就是说，click 事件首先在

元素上发生，而这个元素就是我们单击的元素。然后，click 事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。图 13-1 展示了事件 冒泡的过程。
图 13-1

image.png

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒 泡会跳过元素(从直接跳到 document)。IE9、Firefox、Chrome 和 Safari 则将事件一直 冒泡到 window 对象。

• DOM2事件“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首 先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶 段，可以在这个阶段对事件做出响应。以前面简单的 HTML 页面为例，单击

  元素会按照图13-3所 示顺序触发事件。

  
  

  

  image.png

  
  

  在 DOM 事件流中，实际的目标(

  元素)在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到再到后就停止了。下一个阶段是“处于目标”阶段，于是事件在

  上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生， 事件又传播回文档。
  多数支持 DOM 事件流的浏览器都实现了一种特定的行为;即使“DOM2 级事件”规范明确要求捕 获阶段不会涉及事件目标，但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都会在捕获阶段触 发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

题目4：如何阻止事件冒泡？ 如何阻止默认事件？

DOM中用stopPropagation()阻止事件冒泡，用preventDefault()阻止默认事件，在IE中可以设置cancelBubble为true阻止冒泡，设置returnValue为false阻止默认事件

题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

    
这里是
    
饥人谷
    
前端6班

方法一：

 var ele = document.querySelectorAll(".ct li");
      
      ele.forEach(function(e){
        console.log(e);
        e.addEventListener("click", function(){
         console.log(this.innerText);})})

方法二：

var list = document.getElementsByClassName('ct')[0].getElementsByTagName("li");
      for(var i = 0;i < list.length; i++){
        list[i].addEventListener("click",function(){
            console.log(this.innerText);
        })
      }

方法三：

var element = document.querySelector(".ct");
      element.addEventListener("click",function(e){
          var target = e.target;
          console.log(target.innerText);
      })

题目6： 补全代码，要求：

当点击按钮开头添加时在

这里是

元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

var firstLi = document.querySelector(".ct li");
        var input = document.querySelector(".ipt-add-content");
        var ct = document.querySelector(".ct");
        var lastButton = document.querySelector("#btn-add-end")
            ct.addEventListener("click",function(e){
            var target = e.target;
            console.log(target.innerText);
        });
        var firstButton = document.querySelector("#btn-add-start");
        firstButton.addEventListener("click", function(){
        if(!input.value){ }
        else{
            var newLi = document.createElement("li"); 
            newLi.innerText = input.value;

            ct.insertBefore(newLi,firstLi);
        }});
        lastButton.addEventListener("click",function(){
            if(!input.value){}
                else{
                    var newli = document.createElement("li");
                    newli.innerText = input.value;
                    ct.appendChild(newli);
                }
        })

题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3

var imgPreview = document.getElementsByClassName("img-preview")[0];
      var ct = document.getElementsByClassName("ct")[0];
      ct.addEventListener("mouseover",function(e){
          var target = e.target;
          console.log(e.target);

         var dataImg = target.getAttribute("data-img");
          imgPreview.innerHTML = ''