DOM事件

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

• Dom0级事件处理程序是将一个函数赋值给一个事件处理程序属性，而通过将事件处理程序属性设置为null删除绑定在元素上的事件处理程序。这种方法无法给一个事件添加多个事件处理程序,后面添加的程序会覆盖前面的程序。示例：

    // 添加事件处理程序
    var btn=document.querySelector("#btn")
    btn.onclick=function () {
        console.log(this)
    }
    // 删除事件处理程序
    btn.onclick=null
  

• Dom2级定义了addEventctener()和removeEventctener()用于处理指定和删除事件处理程序。它们都接受3个参数，要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序，如果没有第三个参数默认为事件冒泡(可以指定多个处理程序，兼容ie9及以上浏览器)。

    var btn=document.querySelector("#btn")
    var handler=function(){
        console.log(this)
    }
    // 指定事件处理程序
    btn.addEventctener("click",handler)
    // 删除事件处理程序
    btn.removeEventctener("click",handler)
  

attachEvent与addEventctener的区别？

• attEventctener是DOM2级规定的事件监听函数，而在ie9以下的浏览器中没有实现这个函数，attachEvent就是attEventctener在低版本ie下的兼容方案
• 区别：
  • attEventctener事件处理函数的第一个参数会接收一个代表事件的状态的event对象，而attachEvent中的event对象需要通过window.event调用。
  • attEventctener事件处理函数中的this指向绑定这个处理函数的DOM对象，而attachEvent中的this指向window对象

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

• IE浏览器认为当你触发某个事件，比如点击了某个按钮时，你同时也点击了这个元素的祖先元素，所以，当某个元素触发事件时它的祖先元素的对应事件也会被触发，顺序是从当前元素向所有祖先元素依次触发，这就叫事件冒泡。如图

• 而在当时，ie的竞争对手也同样这么认为，不过它的实现方式是从最外层元素到最内层元素依次触发，这被称为事件捕获。如图

• DOM事件传播机制综合了这两种事件传播机制，它让浏览器先发生事件捕获，而后触发当前元素的事件，然后在发生事件冒泡。如图

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

• 通过调用事件对象(Event)的stopPropagation()方法可以阻止目标元素的冒泡事件（支持ie9及以上浏览器）。而在低版本ie中可以使用 window.event.cancelBubble = true 来阻止事件冒泡
• 通过调用事件对象(Event)的preventDefault()方法可以阻止浏览器的默认行为（支持ie9及以上浏览器）。而在低版本ie中可以使用 window.event.returnValue = false 来默认行为

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

<ul class="ct">
  <li>这里是</li>
  <li>饥人谷</li>
  <li>前端6班</li>
</ul>
<script>
  var ct = document.querySelector('.ct')

  ct.addEventListener('click', function (e) {
  var target = e.target
    if (target.tagName.toLowerCase() === 'li') {
      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 ct = document.querySelector('.ct')
        var btnStart = document.querySelector('#btn-add-start')
        var btnEnd = document.querySelector('#btn-add-end')
        var content = document.querySelector('.ipt-add-content')
        ct.addEventListener('click', function (e) {
            var target = e.target
            if (target.tagName.toLowerCase() === 'li') {
                console.log(target.innerText)
            }
        })
        btnStart.addEventListener('click', function () {
          if (content.value) {
          var liNode = document.createElement('li')
          liNode.innerText = content.value
          ct.insertBefore(liNode, ct.firstChild)
          }
        })
       btnEnd.addEventListener('click', function () {
         if (content.value) {
         var liNode = document.createElement('li')
         liNode.innerText = content.value
         ct.appendChild(liNode)
         }
       })
    </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')
  var imgBox = document.querySelector('.img-preview')

  ct.addEventListener('mouseover', function (e) {
    var target = e.target
    if (target.tagName.toLowerCase() === 'li') {
      var img = document.createElement('img')
      img.src = target.getAttribute('data-img')
      imgBox.innerHTML = ''
      imgBox.appendChild(img)
    }
  })
  ct.addEventListener('mouseout', function (e) {
    var target = e.target
    if (target.tagName.toLowerCase() === 'li') {
      imgBox.innerHTML = ''
    }
  })
</script>