事件

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

DOM0级的事件添加形式为

var btn = document.querySelector("#btn");
btn.onclick = function(){ //do something...}
console.log(this); // btn

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

DOM2级事件添加形式为

var btn = document.querySelector("#btn");
btn.addEventListener("click",handler);
function handler(){ 
  // do sth ...
  console.log(this); // btn
}

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

题目2： attachEvent与addEventListener的区别？

attachEvent()是IE的事件处理程序，它与addEventListener的主要区别在于以下几点：

• 参数个数：attach由于只能运行在IE浏览器中，所以他的事件处理形式只能是事件冒泡，而addEventListener的时间处理形式可以是事件冒泡，也可以是事件捕获，所以他的参数中多了一个boolean值，当为true时，为事件捕获，false时为事件冒泡.
• 事件名：attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on.
• 作用域：在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
• 事件处理程序执行顺序：通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行； 对于addEventListener的事件处理程序则是按照添加顺序执行。

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

事件冒泡模型

• IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。

事件捕获模型

事件捕获的流程与事件冒泡截然相反，当监测到一个事件发生时，事件会从window开始向子级传递，直到传递到目标元素停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。

DOM事件流

• 而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在div上发生，被看做冒泡的一部分。

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

• 对于非IE浏览器

btn.addEventListener("click",function(e){
  e.stopPropatgation();  //阻止事件冒泡或事件捕获
  e.preventDefault() // 阻止默认事件
})
兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包
含一个stopPropagation()方法，可以组织事件的进一步捕获或冒泡（取决于添
加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行
为。（在事件处理程序里使用return false也可以）

• 对于IE浏览器

btn.attachEvent("onclick",function(e){
  e.cancelBubble = true; // 阻止事件冒泡
  e.returnValue = true; // 阻止默认事件
对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为
true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取
消事件的默认行为。
})

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

    
这里是
    
饥人谷
    
前端6班

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

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

预览地址

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

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


  ![](http://upload-images.jianshu.io/upload_images/3436795-c22d6104a432be76.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](http://upload-images.jianshu.io/upload_images/3436795-c8111f0926647c06.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](http://upload-images.jianshu.io/upload_images/3436795-33c177e30e0e513f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

预览地址