进阶9

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

DOM0:
1.HTML内联方式：使用HTML属性来指定元素支持的每个事件，但存在加载顺序问题和代码维护问题
2.JavaScript指定事件处理程序：把一个方法赋值给一个元素的事件处理属性（将这些属性的值设置为一个函数，就可以指定事件处理程序。一个事件只能绑定一次，并且新方法会覆盖老方法。例如btn.onclick=function(){}）
DOM2:
1.新增了2个办法，addEventListener(),removeEventListener()
2.2个方法都接受三个参数，事件类型，事件处理方法，布尔参数

题目2： attachEvent与addEventListener的区别？

1.参数的个数不同，对于attachEvent拥有2个参数，对于addEventListener拥有3个参数，第三个参数，可以控制addEventListener的添加的事件处理程序是在冒泡阶段还是捕获阶段处理，对于attachEvent添加的事件处理程序只能在冒泡阶段。
2.第一个参数的意义不同，对于attachEvent指的是事件处理函数的名称。对于addEventListener，指的是事件的类型。
3.事件处理程序的作用域不同，对于addEventListener的作用域是元素本身，this是指触发元素。attachEvent的作用域是全局，this指的是window。
4.为一个事件添加多个事件处理程序时，执行顺序不同。对于addEventListener，执行顺序会按照添加顺序来进行。对于attachEvent,执行顺序是无规律的（当添加的方法少时，会按照添加顺序的反顺序来进行，当添加的方法多时，会无规律进行）

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

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

image.png

DOM2事件传播机制：
DOM2事件传播机制分为3个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，首发事件是事件捕获，为截取事件提供机会然后是实现目标接受事件，最后是事件冒泡阶段

image.png

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

阻止事件冒泡：
使用stopPropagation()。
阻止默认事件：
使用preventDefault()。但前提是cancelable的值为true

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

方法1

    
这里是
    
饥人谷
    
前端6班

方法2

    
这里是
    
饥人谷
    
前端6班

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

当点击按钮开头添加时在

这里是

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

方法2

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

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

方法1

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

方法2

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

题目8： 写一篇博客，讲解事件相关知识点，如事件冒泡、捕获、代理、兼容写法等(选做题目)