进阶9-事件

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

-DOM0事件监听及使用的本质是将事件处理程序（即一个函数）赋值给一个节点的属性，以达到操作DOM节点的目的，通过给属性赋值的这种方式，由于时间上后赋值的属性会覆盖先赋值的属性，因此DOM0的事件处理程序只能有一个。

-DOM2级事件监听及使用本质上是对相应的节点执行一个函数，而函数的数据类型为对象，也就决定了不同的函数为不同的对象，因此DOM2级事件处理程序可以有很多个
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener 和 removeEventListener， 所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
事件类型
事件处理方法
布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

题目2： attachEvent与addEventListener的区别？

DOM2级事件监听及处理程序在IE6、IE6及IE8中并不支持，但是IE中提供了类似的替代用法，即attachEvent和detachEvent
在添加事件处理程序事addEventListener和attachEvent主要有几个区别

• 参数个数不相同：addEventListener传递参数（事件类型，事件处理方法，布尔值），attachEvent传递两个参数（事件，处理程序），attachEvent添加的事件处理程序只能在冒泡阶段发生，ddEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
• 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
• 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，console.log(this)中的this指的是触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window。
• 为一个事件添加多个事件处理程序时，执行顺序不同：addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)

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

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向父级元素传递，直到传递到window
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段（事件捕获与事件冒泡刚好相反，是有window一级一级向子元素进行传递，直到传递至目标元素），处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

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

• stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。
• 要阻止事件的默认行为，可以使用preventDefault()方法，前提是事件的属性cancelable值为true

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

  <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
  </ul>
  <script>
     // 方法1
    var ct = document.querySelector('.ct');
    ct.addEventListener('click', function (e) {
      console.log(e.target.innerText);
    });

    // 方法2
    var liNodes =document.querySelectorAll('li')
    liNodes.forEach(function(node) {
      node.addEventListener('click', function(){
        console.log(this.innerText)
      })
    });
  </script>

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

当点击按钮开头添加时在< 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 addStart = document.querySelector('#btn-add-start')
    var addEnd = document.querySelector('#btn-add-end')
    var iptContent = document.querySelector('.ipt-add-content')
    var container = document.querySelector('ul')
    console.log(container)
    container.addEventListener('click', function (e) {
      console.log(e.target.innerText)
    })
    addStart.addEventListener('click', function () {
      if (iptContent.value !== '') {
        var node = document.createElement('li')
        node.innerText = iptContent.value
        container.insertBefore(node, container.firstChild)
      }
    })
    addEnd.addEventListener('click', function () {
      if (iptContent.value !== '') {
      var node = document.createElement('li')
      node.innerText = iptContent.value
      container.appendChild(node)
      }
    })
  </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/13.jpg">鼠标放置查看图片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
  </ul>
  <div class="img-preview"></div>
  <script>
    // 方法1
    var liNodes = document.querySelectorAll('li');
    var preview = document.querySelector('.img-preview');

    for (var i = 0; i < liNodes.length; i++) {
      liNodes[i].addEventListener('mouseenter', function () {
        var dataImg = this.getAttribute('data-img');
        preview.innerHTML = '![](' + dataImg + ')'
      });
    }

    //方法2

    // var ct = document.querySelector('.ct')
    // console.log(ct)
    // var imgPre = document.querySelector('.img-preview')
    // console.log(imgPre)
    // ct.addEventListener('mouseover', function (e) {
    //   var path = e.target.getAttribute('data-img');
    //   console.log(path)
    //   imgPre.innerHTML = '![](' + path + ')'
    // })
  </script>