进阶9

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

• Dom0级事件处理程序:
  在DOM0级事件处理程序，事件名以'on'开头，因此click事件的事件处理程序就是onclick、load事件的事件处理程序就是onload。
  DOM0事件监听方式：
  内联方式，与CSS内联样式相对

  事件处理程序的具体实现，在页面其它地方定义

  DOM2事件监听方式:
  DOM2事件监听方式：
  addEventListener()，参数列表：

  1.事件类型
  2.事件处理方法
  3.布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

  使用举例：

  DOM0和DOM2事件监听使用区别：DOM2可以为事件添加多个处理程序

attachEvent与addEventListener的区别？

• 参数个数不同：attachEvent接收两个参数（事件名称和方法），addEventListener接收三个参数（事件类型、方法、布尔值）

• 第一个参数意义不同：addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

• 事件处理程序的作用域不相同：addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

• 为一个事件添加多个事件处理程序时，执行顺序不同：addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)

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

• IE事件冒泡：
  对一个例如div这样的子容器进行事件监听，IE的传播机制是从事件目标节点逐步的向上层结点传播，直到到达根结点

image.png

• DOM2事件传播机制：
  事件开始时由最大的，不具体的元素接收，然后逐级向小的具体元素逐级传递，再反向传出

image.png

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

阻止事件冒泡：

标准事件模型：

stopPropagation()

IE事件模型：

cancelBubble默认为false，设置为true后可以取消事件冒泡

阻止默认事件：

标准事件模型：

preventDefault()

IE事件模型：

returnValue默认为true，设为false可以取消事件默认行为

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

    
这里是
    
饥人谷
    
前端6班

image.png

补全代码，要求：

当点击按钮开头添加时在

这里是

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

image.png

代码

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

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