事件处理

1.事件代理

• 事件代理:为子元素添加监听器转变为为父容器添加监听器,然后通过event.target判断具体操作的元素
• 事件的传递是和文档结构有关的

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

• DOM0级事件处理程序

  • 使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此,事件处理程序是在元素的作用域中运行

  var btn = document.getElementById('btn');
  btn.onclick = function (){
    console.log(this.id);  // btn
  }
  

  • 使用DOM0级方法只能为元素的一个事件指定一个处理程序,后面指定的会覆盖前面指定的(因为事件处理程序被认为是元素的方法,同一事件则方法名相同)

  // 后一个事件处理程序会覆盖前一个事件处理程序
  var btn = document.getElementById('btn');
  btn.onclick = function (){
    console.log(this.id);  
  }
  btn.onclick = function (){
    console.log("hello");  
  }
  

  • 使用DOM0级方法删除事件处理程序

  var btn = document.getElementById('btn');
  btn.onclick = function (){
    console.log(this.id);  
  }
  btn.onclick = null;
  

  • 使用DOM0级方法指定的事件处理程序兼容IE较低版本

• DOM2级事件处理程序

  • 使用DOM2级方法指定的事件处理程序

  var btn = document.getElementById('btn');
  btn.addEventListener("click", function(){
    console.log("test");
  });
  

  function handler(){
    console.log("test");
  }
  var btn = document.getElementById('btn');
  btn.addEventListener("click", handler);
  

  • 使用DOM2级方法可以为元素针对多个事件指定多个处理程序,这些事件处理程序会按照添加顺序依次执行

  var btn = document.getElementById('btn');
  function handler(){
    console.log("test");
  }
  btn.addEventListener("click", function(){
    console.log("test");
  });
  btn.addEventListener("click", handler);
  

  • 使用DOM2级方法可以为元素删除事件处理程序,但是指定的匿名事件处理函数无法删除

  btn.removeEventListener("click", handler);
  

  • 使用DOM2级事件处理程序可以指定在哪一阶段调用事件处理程序(捕获阶段or冒泡阶段)

  btn.addEventListener("click", handler, false); // 在冒泡阶段调用事件处理程序
  btn.addEventListener("click", handler, true); // 在捕获阶段调用事件处理程序
  

  • 使用addEventListener为元素添加的事件处理程序也是在其依附的元素的作用域中运行

  var btn = document.getElementById('btn');
  function handler(){
      console.log(this.id);
  }
  btn.addEventListener("click", handler);  // 触发时输出 btn
  

2.attachEvent与addEventListener的区别？

• 在低版本IE浏览器中,只支持事件冒泡,因此不支持addEventListener和removeEventListener方法,但是实现了类似的两个方法:attachEvent和detachEvent
• addEventListener:
  • 可以指定2或3个参数
  • 可以指定在哪一阶段调用事件处理程序(捕获阶段or冒泡阶段),默认是冒泡阶段
  • addEventListener第一个参数是事件类型（比如click，load）
  • 为元素添加的事件处理程序是在其依附的元素的作用域中运行
  • addEventListener针对一个事件添加的多个事件处理程序会按照添加顺序执行
• attachEvent:
  • 只能指定2个参数
  • 添加的事件处理程序都会在冒泡阶段被执行,无法指定在哪一阶段调用事件处理程序
  • attachEvent第一个参数是事件处理函数名称（比如onclick，onload）
  • 为元素添加的事件处理程序是在全局作用域中运行
  • 事件处理函数名称针对一个事件添加的多个事件处理程序会无规律执行

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

• IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
• Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
• DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

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

• 阻止事件冒泡:event.stopPropagation();

    
    



    
hello!

• 阻止默认事件:event.preventDefault();

//阻止点击a标签后导致的页面跳转
baidu

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

• 事件委托/事件代理:对于"事件处理程序过多"问题的解决方案就是事件委托/事件代理.事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.使用事件委托结束解决以下问题,只需要在DOM树中尽量高的层次上添加一个事件处理程序.

    
aaaa
    
bbbb
    
cccc

6.补全代码，要求：

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

    

        
aaaa
        
bbbb
        
cccc
    
    
    开头添加
    结尾添加

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

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

实现效果