JS事件

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

DOM0级事件

了解DOM0级事件之前，先了解下HTML事件处理程序


//也可以调用页面其它地方定义的函数

这样的事件处理程序最大的缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。当然其优点是不需要操作DOM来完成事件的绑定。

DOM0事件是将一个函数赋值给一个事件处理程序属性

这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。
使用DOM0级方法指定的事件处理程序被认为是元素的方法。此时事件处理程序是在元素的作用域中运行，程序中的this引用当前元素；DOM0的优势在于简单和兼容性好，缺点在于只能存在一个处理程序，如果再次向同一个元素添加另一个处理程序，上一个处理程序会被覆盖。

DOM2级事件处理程序

由于DOM0级事件处理程序会产生事件冒泡和事件覆盖等问题，W3C组织制定了“DOM2级事件处理程序”。“DOM2级事件处理程序”定义了2个方法，用于处理指定和删除事件处理程序的操作，这2个方法是：addEventListener和removeEventListener。所有的DOM节点中都包含这两个方法，这些方法接收3个参数：要处理的事件名称、作为事件处理程序的函数和一个布尔值。布尔值参数如果设置为true，表示在捕获阶段调用事件处理程序，如果设置为false，表示在事件冒泡阶段调用事件处理程序。

上面的代码为按钮添加了一个DOM2级事件处理程序，事件名称是click，对应DOM0级的onclick属性。因为最后一个参数为false，所以这个事件会在冒泡阶段被触发。
和DOM0级事件处理程序相同，DOM2级事件处理程序也会依附在元素的作用域中运行
使用DOM2级事件处理程序就可以避免DOM0级事件处理程序的事件覆盖问题


   
//3个事件都会被执行，控制台中依次打印出：“event-one”、“event-two”和“event-three”。

二、attachEvent与addEventListener的区别？

支持的浏览器不同。attachEvent是IE私有的，不符合W3C规范。在IE9以下的版本中受到支持。addEventListener是符合W3C规范的事件绑定方法，FireFox、Chrome、Safari都是用它来绑定事件。
参数不同。
addEventListener有3个参数，如下所示：
element.addEventListener(type,listener,useCapture);
attachEvent有2个参数，如下所示：
element.attachEvent(type,listener);
addEventListener第三个参数可以指定是否捕获，而attachEvent不支持捕获。
事件名不同。addEventListener第一个参数是事件类型（比如click，load），attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）；
this不同。
attachEvent的this总是Window。
addEventListener的this总是当前正在处理事件的那个DOM对象。
执行事件顺序不同
addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)

三、解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡的传播顺序是由里到外，事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

四、如何阻止事件冒泡？如何阻止默认事件？

//阻止事件冒泡
function stopBubble(e) {
    // 如果提供了事件对象，则这是一个非IE浏览器
    if ( e && e.stopPropagation ) {
        // 因此它支持W3C的stopPropagation()方法 
        e.stopPropagation();
    } else { 
        // 否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}
//阻止默认事件
function stopDefault( e ) {
     // 阻止默认浏览器动作(W3C)
     if ( e && e.preventDefault ) {
         e.preventDefault();
     } else {
        // IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
    }
    return false;
}

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


        这里是
        饥人谷
        前端6班

六、补全代码，要求：

当点击按钮开头添加时在
这里是
当点击每一个元素li时控制台展示该元素的文本内容。


        这里是
        饥人谷
        任务班

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


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