事件

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

1. DOM0 级事件处理

DOM0 级事件处理，事件名以on开头，如onclick、onload等。

• 在 HTML 上进行事件处理

点击

通过这种方式添加事件，会使 HTML 和 JS 耦合在一起，不容易维护和 bug 排查。

• 通过 JS 添加事件

点击

要添加一个事件，就需要先获得对应的 DOM 元素，然后把事件绑定在元素上面。DOM0 级在同一个元素上绑定同一个事件会覆盖，而清除事件只需要btn.onclick = null即可。

2. DOM2 级事件处理

W3C标准为 DOM2 级事件规范添加了两个方法addEventListener() removeEvenListener()，分别用于添加事件和移除事件。

点击

移除事件btn.removeEventListener("click", clickFnc, false);

参考： JavaScript DOM文档事件－DOM0、DOM2级事件处理程序

二、attachEvent 与 addEventListener 的区别？

在早期 IE 浏览器中（如： IE 8）是不支持新标准的 addEvenlistener 方法的，但是提供了 attachEvent 方法来代替，所以这是 IE 兼容问题。不过现在基本不再考虑这个兼容了，另外 IE 使用 detachEvent 来解绑事件。以下详细说说两者的区别。

1. 事件机制

在老版的 IE 中，只支持 DOM0 级事件，也就是说，只有事件的冒泡阶段。而addEventListener()是 DOM2 级事件，是一个由事件捕获 => 目标事件 => 事件冒泡 这样的一个事件流。这也是为什么attachEvent() 没有第三个参数的原因。

2. 事件对象

在attachEvent()绑定的函数中，并没有把对应的目标事件对象传进来，所以只能通过window.event来访问这个事件对象。

3. 事件中的 this

在attachEvent()绑定的函数中，没有把事件触发的对象作为 this 传进函数，所以在attachEvent()中直接使用 this 的话，是全局window对象。

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

• 事件冒泡

事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

事件冒泡

• DOM2 事件传播机制

DOM2 级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

DOM2 事件流

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

要阻止事件冒泡，可以对传进来的事件执行stopPropagation()方法，这个方法取消事件进一步捕获或冒泡，如

document.querySelector(element).addEventListener('click',function(e){
  e.stopPropagation()
  //这里开始阻止后续的冒泡或者捕获了
  console.log('xxx')
})

要取消默认事件，如点击后的默认跳转行为或者是

表单的提交行为，可以对事件执行preventDefault()方法。

另外，直接使用return false可以粗暴的阻止事件冒泡、捕获和默认事件。

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

    
这里是
    
饥人谷
    
前端6班

结果

    
这里是
    
饥人谷
    
前端6班

在线预览

六、 补全代码，要求：

1. 当点击按钮开头添加时在
2. 这里是
元素前添加一个新元素，内容为用户输入的非空字符串；
3. 当点击结尾添加时在最后一个
4. 元素后添加用户输入的非空字符串.
5. 当点击每一个元素
6. 时控制台展示该元素的文本内容。

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

结果

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

在线预览

七、补全代码，要求：当鼠标放置在

元素上，会在img-preview里展示当前

元素的data-img对应的图片。

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

结果

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

在线预览