事件

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

• DOM0是将代码写进HTML标签内，例如控制台输出1
  • 优点：
    • 浏览器兼容性好
    • 事件绑定速度快，不用等到js文件下载完
  • 缺点：
    • 如果onclick使用的是js文件中的函数，js文档加载时用户点击会没有反应
    • 不易于维护，每次都需要修改HTML代码和'JavaScript'代码
    • 只能绑定一个事件，无法绑定多个处理程序，这种方法一个事件只能绑定一个处理程序，如果写多个，后面的处理程序会将前面的覆盖
• 'DOM2级'事件通过addEventListener,removeEventListener两个方法在js文件中处理和删除事件处理程序的操作
  • 优点：
    • 易于维护，每次只修改JavaScript代码就好
    • 可以绑定多个事件
  • 缺点：
    • IE需要使用能力判断

---

attachEvent与addEventListener的区别？

• 参数个数不同：addEventListener有三个参数，attachEvent只有两个参数
• 事件发生的阶段不同：addEventListener的第三个参数可以决定添加的事件实在捕获阶段还是冒泡阶段，而IE只能发生在冒泡阶段
• 第一个参数意义不用，addEventListener是事件类型（click,load），而attachEvent是事件处理的函数名(onclick,onload)
• 事件处理程序的作用域不同，addEventListener的作用域是元素本身，而attachEvent的作用域是window
• 为一个事件添加多个处理程序的时候，顺序不一样：addEventListener是按照添加顺序添加的，而attachEvent是随机添加的

---

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

IE事件冒泡

DOM2事件传播机制

• IE事件冒泡
  • 由最子元素接受，然后一次向上传递，直到文档的根节点document
• DOM2事件传播机制
  • 分为三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段
    • 事件捕获阶段：事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
    • 处于目标阶段:到达事件的目标节点，执行目标节点的时间处理程序。
    • 事件冒泡阶段：与IE事件一样

---

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

• 阻止事件冒泡

  function stopPropagation(e) {
  if (e.stopPropagation)
      e.stopPropagation();
  else
      e.cancelBubble = true;
  }
  

• 阻止默认事件

  function preventDefault(e) {
  if (e.preventDefault)
      e.preventDefault();
  else
      e.returnValue = false;
  }
  

---

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

```

    
这里是
    
饥人谷
    
前端6班

```
```

```

---

补全代码，要求：

当点击按钮开头添加时在

这里是

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

---

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

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

面试的时候被问到了时间代理和委托，让我用原生js实现一下，当时没有回答上来。于是又恶补了一番。

当一个ul或者ol中有多个li元素的时候，我们不必一个一个的给每个li添加时间，以下大多数人能想到的方式

    
点我1
    
点我2
    
点我3
    
点我4

let items = document.querySelectorAll('#click-container > li')
for(let i=0;i

事件冒泡大家都应该知道，我们可以利用事件冒泡来获取用户点击的标签。先看代码。

let clickContainer = document.getElementById('click-container')
clickContainer.addEventListener('click',function(e){
    if(e.target.nodeName.toUpperCase() === 'LI'){
        console.log(e.target)
    }
},false)

代码很简单，大致的原理就是在冒泡阶段监听整个ul的点击时间，通过e.target判断用户到底点的是哪个li,我想如果我当时能说出这么多的话应该不会挂的那么快...