事件

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

• DOM0级事件
  移除属性只需将属性置空
  该方式不会做同一对象的同类型事件绑定累加，即后者覆盖前者
  事件处理程序会在事件流的冒泡阶段被处理
  所有的浏览器都支持DOM0 级事件处理程序

• DOM2级事件
  定义了两个方法，用来指定和删除事件处理程序：addEventListener() 和 removeEventListener()。这两个方法都接受3个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值，这个布尔值参数如果为true表示在捕获阶段调用事件处理程序，为false表示在冒泡阶段调用事件处理程序，默认设为false。通过addEventListener添加的事件处理程序只能通过removeEventListener()来移除
  可以为同一个元素绑定多个事件处理程序，绑定的事件处理程序会按照它们添加的先后顺序依次触发
  IE9+、Firefox、Safari、Chrome和Opera都支持DOM2 级事件处理程序

attachEvent与addEventListener的区别？

• attachEvent
  IE8及以下版本使用
  事件处理程序中的this指向全局对象window
  要处理的事件名前需要加'on'
  处理程序会在冒泡阶段调用
• addEventListener
  IE9+、Firefox、Safari、Chrome和Opera都支持
  事件处理程序中的this引用当前元素
  通过设置第三个参数为true或false可以设定在捕获阶段还是冒泡阶段调用事件处理程序

解释IE事件冒泡和DOM2事件传播机制？

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
DOM2级事件：首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

如何阻止事件冒泡？ 如何阻止默认事件？

• DOM中的事件对象：
  preventDefault()方法用来取消事件默认行为
  stopPropagation()方法用来阻止事件进一步捕获或冒泡
  return false 退出执行, return false 之后的所有触发事件和动作都不会被执行
• IE8及以下中的事件对象
  returnValue属性用来设置事件的默认行为。默认值为true，当设置为false时，就会取消事件的默认行为。
  cancelBubble属性用来取消事件冒泡。默认值为false，当设置为true时，就会阻止事件冒泡。

      <!-- 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容 -->
      <ul class="ct">
          <li>这里是</li>
          <li>饥人谷</li>
          <li>前端6班</li>
      </ul>
      <script>
      var liNodes= document.querySelectorAll('.ct li')
      var ct= document.querySelector('.ct')
      ct.addEventListener('click',function(e){
          var target= e.target
          console.log(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 liNodes= document.querySelectorAll('.ct li')
          var addS=document.querySelector('#btn-add-start')
          var addE=document.querySelector('#btn-add-end')
          var ct=document.querySelector('.ct')
          var ipt=document.querySelector('.ipt-add-content')
          ct.addEventListener('click',function(e){
          var target= e.target
          console.log(target.innerText)
          })
          addS.addEventListener('click',function(){
              var text= ipt.value
              if(text !=""){
              var node= document.createElement('li')
              node.innerText=ipt.value
              ct.insertBefore(node,ct.firstChild)}
          })
          addE.addEventListener('click',function(){
              var text= ipt.value
              if(text !=""){
              var node= document.createElement('li')
              node.innerText=ipt.value
              ct.appendChild(node)}
          })
      </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'),
                imgP=document.querySelector('.img-preview')

                ct.addEventListener('mouseover',function(e){
                    var dataImg=e.target.getAttribute('data-img')
                    imgP.innerHTML='![]('+dataImg+')'
                })
                ct.addEventListener('mouseout',function(){
                    imgP.innerHTML=''
                })
        </script>