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时控制台展示该元素的文本内容。不考虑兼容

  
这里是
  
饥人谷
  
前端6班

补全代码，要求:

• 当点击按钮开头添加时在

• 这里是
元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.

• 当点击每一个元素li时控制台展示该元素的文本内容。

    
  
        
  这里是
        
  饥人谷
        
  任务班
    
    
    开头添加
    结尾添加
    
  

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

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