进阶9 事件

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

DOM0 的优势在于简单和兼容性好，劣势在于只能存在一个事件处理程序，如果再次向同一个元素添加另一个事件处理程序，上一个处理程序会被覆盖。
DOM0事件的写法有两种，一种是直接嵌在html中

哈哈

第二种是给目标对象的事件属性赋值，赋一个事件处理函数给该属性，由于本质是在赋值，所以后来写的会覆盖之前写的。
如：

//html
// 
 var btn = document.querySelector('#btn')
btn.onclick = function(){
  console.log('you click me')
}

DOM2 级事件处理方式如下（IE8 及之前版本不支持）。DOM2 方法的好处是可以添加多个事件处理程序。

//html
// 
 var btn = document.querySelector('#btn')
btn.addEventListener('click',function () {
        console.log('哈哈')
    })

2、attachEvent 与 addEventListener 的区别

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

事件名：attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on.
作用域：在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window；而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
事件处理程序执行顺序：通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行；对于addEventListener的事件处理程序则是按照添加顺序执行。

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

IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。
DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段：处于目标阶段，此时事件在div上发生，被看做冒泡的一部分。第三阶段：冒泡阶段

IE冒泡模型

DOM2 事件传播机制

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

当事件发生时，浏览器会创造event 对象，并且event 对象会被依次传递给事件监听器。
在处理函数中，将event对象作为第一个参数参数，可以访问 DOM Event 接口。
这个event对象包含一个stopPropagation()方法，可以阻止事件的进一步捕获或冒泡（取决于添加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行为。（在事件处理程序里使用return false也可以）
对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡；还有returnValue，默认值为true，设置为false用来取消事件的默认行为。

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


    这里是
    饥人谷
    前端6班

代码二补全代码，要求：

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


    这里是
    饥人谷
    任务班

代码3





    
    
    Examples




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

demo