mission-24

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

Dom0级

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

Dom2级

而Dom2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。所有Dom节点都包含这两个方法，并且它们都接受3个参数，要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

但是通过removeEventListener()函数来移除事件处理程序时，移除时的参数必须与添加处理程序时使用的参数相同，这也意味着通过addEventListener()添加的匿名函数将无法移除。如：

二者区别：

使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，而Dom0级为一个事件添加多个事件处理程序时，后面的程序会覆盖前面的。

Q2： attachEvent与addEventListener的区别？

参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

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

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

DOM2级事件传播机制：事件捕获阶段，处于目标阶段，事件冒泡阶段

其中冒泡和捕获阶段区别在于事件被触发后传播的先后顺序。





• 若单击了页面中的a链接，那么那么处于用户鼠标下的div p a将全部响应单击事件。
  
• 在事件捕获的过程中，最外层的元素首先响应，接着再传递给更具体的元素。即div>p>a
  
• 在事件冒泡的过程中，则最具体的元素首先响应，响应之后，事件会向上冒泡至更一般的元素。a>p>div

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

  chrome等浏览器：stopPropagation()阻止事件冒泡，preventDefault()阻止默认事件
  IE：cancelBubble=true阻止事件冒泡，returnValue=false阻止默认事件

  
  
  

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

  
  
  

  
   
  
   
  这里是
   
  饥人谷
   
  前端6班
   
   
   

  Q6： 补全代码，要求：

  
  
  

  
   
  
   
  这里是
   
  饥人谷
   
  前端6班
   
   
   开头添加
   结尾添加
   
   

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

  
  
  

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