事件

DOM0 级事件处理程序和DOM2级在事件监听使用方式上有什么区别

• DOM0 级事件处理程序
  将一个函数赋值给一个事件处理程序属性，具有跨浏览器的优势，这种方式添加的时间处理程序在事件流的冒泡阶段被处理

var btn = document.getElementById("btn")
btn.onclick = function(){
    console.log('clicked');
} 

删除事件处理程序将事件处理程序属性设置为NULL

btn.onclick = null;

• DOM2级事件处理程序
  用于指定和删除事件处理程序的两个方法分别是addEventListener()和removeEventListener(),它们都接受三个参数，分别是处理事件名、事件处理程序函数和布尔值，通过设定布尔值可以决定其调用事件处理程序的阶段，true值为捕获阶段，false为冒泡阶段。使用DOM2级事件处理程序好处是可以添加多个事件处理程序。

var btn = document.getElementById("btn")
btn.addEventListener('click',function(){
     console.log('clicked')
},ture);

需要注意的是如果在addEventListener()中添加的匿名函数，则不可以被removeEventListener()删除，所以需要如下

var btn = document.getElementById("btn")
var handle = function(){
     console.log('clicked')
}
btn.addEventListener('click',handle,ture);
btn.removeEventListenr('click',handle)

attachEvent与addEventListener的区别

• 参数个数不一致
  attachEvent()相比较addEventListener()，没有第三个布尔值参数，因为其添加的事件处理程序只发生在事件流的冒泡阶段
• 第一个参数的不同
  attachEvent()的第一个参数指事件处理函数名称（onclick,onload）;addEventListener()的第一个参数指事件类型（click,onload）
• 事件处理程序的作用域不相同
  attachEvent()会在全局作用域中运行，也就是window；
  addEventListener()在其所属元素的作用域内运行
  -当为一个事件添加多个事件处理程序时，执行顺序不同
  addEventListener()会按照添加顺序执行；attachEvent()
  添加多个事件处理程序时会按添加顺序的反方向依次执行，但是添加大量事件处理程序时执行顺序是不规律的

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

• IE事件冒泡
  事件开始时由最具体的元素接收，然后逐层向上传播到不具体的元素
• DOM2级事件
  整个事件流分为三个阶段，分别是捕获阶段、处于目标阶段和冒泡阶段，按捕获阶段、处于目标阶段、冒泡阶段依次执行

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

• 阻止事件冒泡
  • DOM中使用stopPropagation()取消事件进一步捕获和冒泡
  • IE中使用cancelBubble设置为true取消事件冒泡
• 阻止默认事件
  • DOM中使用preventDefault()取消默认事件
  • IE中使用returnValue设置为true取消默认事件

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

    
这里是
    
饥人谷
    
前端6班

补全代码，要求：

当点击按钮开头添加时在

这里是

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

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

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