事件

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

Dom0添加同一个事件只能添加一次，多次添加时后面的会覆盖前面的，事件在冒泡阶段执行；
Dom2级可以给同一个事件添加多个事件处理程序，按顺序执行，事件接收参数控制事件是在冒泡顺序还是捕获顺序，true是捕获阶段，false是在冒泡阶段。

2： attachEvent与addEventListener的区别？

1.attachEvent接收两个参数，一个参数是事件处理函数，在参数前加'on',事件处理程序在冒泡阶段；addEventlistener有三个参数，第一个参数是事件类型，第三个参数决定在哪个阶段，true在捕获阶段，false在冒泡阶段。

2.事件处理程序作用域不同，attachEvent事件处理函数的作用域是全局作用域，this等于window;addEventlistener事件处理函数作用域是元素作用域

3.为一个事件添加多个事件处理程序时，执行顺序不同，attachEvent执行顺序无规律；addEventlistener是按顺序执行

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

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

DOM2事件传播机制
DOM2事件传播包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，当点击时，先从最外层向内层传递，到了目标后再从内层向外层传递，整个流程如下图

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

e.stopPropagation()可以阻止冒泡

 



   var ct = document.querySelector('.ct')
   var box = document.querySelector('.box')
   ct.addEventListener('click',function() {
       console.log('ct')
   })
   box.addEventListener('click',function(e){
       console.log('box')
        e.stopPropagation()  //点击box时不会向上传递
   })

preventDefault()方法可以阻止默认行为，比如阻止链接跳转

document.getElementsByTagName('a').onclick = function (e) {
    e.preventDefault();
}

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

    
这里是
    
饥人谷
    
前端6班

6： 补全代码，要求：

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

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

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