任务24-事件

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

DOM0事件：
box.onclick=function(){do something};在事件流的冒泡阶段被处理,同一对象的同一个事件只能添加一个处理方法，后面再写的方法会覆盖前面的。元素内联
DOM2事件：
addEventListener()添加的事件处理程序
removeEventListener()移除事件处理程序。
要注意的是如果添加的是匿名函数事件响应，就不能用removeEventListener()移除。
例：box.addEventListener("click",function(){do something},true);
可以设置第三个参数，true：是在捕获阶段响应事件 false（默认）：在冒泡阶段响应事件。并且可以为对象的同一个事件添加多个处理方法。
IE中有两个类似的方法attachEvent()和detachEvent()也属于DOM2事件，不同之处是不能设置第三个参数，只能在事件冒泡阶段响应事件，另外，要在事件类型前加"on",如"click"变成"onclick"。

题目2： attachEvent与addEventListener的区别？

addEventListener()可以设置第三个参数,true：是在捕获阶段响应事件 false（默认）：在冒泡阶段响应事件。
attachEvent()则不能设置第三个参数，只能在事件冒泡阶段响应事件，另外，要在事件类型前加"on",如"click"变成"onclick"。

题目3： 解释IE事件冒泡和DOM2事件传播机制？

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
W3C标准中，DOM事件流中和了两种情况，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件目标（target）。然后，再从事件源往上进行事件冒泡，再回到顶层。

题目4：如何阻止事件冒泡？ 如何阻止默认事件？

阻止事件冒泡

判断是否支持W3C的stopPropagation()方法  
  if ( e && e.stopPropagation ) 
  e.stopPropagation(); //阻止事件继续传递
   else 
   window.event.cancelBubble = true;  //不支持，则用IE的方式来取消事件冒泡 
//例：
div.addEventListener("click",function(e){
  console.log("我是div");
}
function stopBub(e){
   if ( e && e.stopPropagation ) 
  e.stopPropagation();
   else 
   window.event.cancelBubble = true;
}

**阻止浏览器的默认行为 **

是否支持e及preventDefault方法
  if ( e && e.preventDefault ) 
    e.preventDefault(); //阻止浏览器默认行为
  else 
    window.event.returnValue = false;   //IE中阻止浏览器默认动作的方式 
//例：
btn.addEventListener("click",function(e){
  console.log("我是div");
   if ( e && e.stopPropagation ) 
  e.stopPropagation();
   else 
   window.event.cancelBubble = true;
}

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

    
这里是
    
饥人谷
    
前端6班

题目6： 补全代码，要求：

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

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

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