进阶九 事件

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

• DOM0事件的添加形式为：

  let btn = document.getElementById("myBtn");
  btn.onclick = function(){
  //do sth...
  console.log(this); // myBtn
  }
  

// 事件以'on'开头，如onmouseover, onmouseout等
使用DOM0级方法指定的事件处理程序被认为是元素的方法，此时事件处理程序是在元素的作用域里中运行，所以此时this指向的是元素本身。而且这种添加方式的缺陷是，只能存在一个处理程序，如果再次向同一个元素添加另外一个处理程序，上一个处理程序会被覆盖。

• DOM2级别事件监听使用的方法为：

  let btn = document.getElementById("myBtn");
  btn.addEventListener("事件名", function(){
    //do sth...
      console.log(this); // myBtn
  });
  

这样的添加方式比起DOM0级更灵活，它可以给一个同一个元素添加多个处理事件。同时它的this也同样指向元素本身。

2. attachEvent与addEventListener的区别？

• attachEvent适用于IE，而addEventListener适用于所有其它主流浏览器。
• attachEvent中的事件名带on 而addEventListener中的事件名不带on
• 通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行； 对于addEventListener的事件处理程序则是按照添加顺序执行。
• 在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
• attachEvent方法两个参数:第一个参数为事件名称,第二个参数为接收事件处理的函数
• addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数是一个bool值,为true的话在事件捕获阶段处理事件，为false的话在冒泡阶段处理事件，默认为false。

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

• IE事件冒泡：一开始由最具体的元素接受事件，然后逐级向上传递到较为不具体的事件。
• DOM2事件传播机制：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

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

• IE事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
  当用户点击了

  元素，click事件将按照

  —>—>—>document的顺序进行传播。

• DOM2事件传播机制：
  DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

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

 
  

  
这里是
  
饥人谷
  
前端6班

    

6. 补全代码，要求：

• 当点击按钮开头添加时在< li>这里是< /li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
• 当点击每一个元素li时控制台展示该元素的文本内容。
  
  
  
  
  • 这里是
  
  
  • 饥人谷
  
  
  • 任务班
  
  
  
  
  开头添加
  结尾添加
  
  

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

  

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