关于DOM事件篇收集的知识点

IE提出事件流

• 事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到不具体的节点；

Netscape提出事件流

• 事件捕获，即不太具体的节点更早接收到事件，而最具体的节点应该最后接收到事件；

为事件指定处理程序的方式

• HTML事件处理程序
• DOM0级事件处理程序
• DOM2级事件处理程序
• IE事件处理程序
• 跨浏览器事件处理程序

'DOM2级事件‘的两个方法

• addEventListener() & removeEventListener()
• 通过addEventListener() 添加的事件处理程序只能使用removeEventListener()来移除
• 通过addEventListener() 添加的匿名函数将无法移除

阻止特定事件的默认行为

• event.preventDefault()

阻止事件的捕获或冒泡

• event.stopPropagation()

‘’DOM2级事件‘’规定的事件流包括哪三个阶段？

• 事件捕获阶段、处于目标阶段、事件冒泡阶段；

确认事件当前正处于事件流的哪个阶段？

• 通过event.eventPhase确认
• 捕获阶段为1， 目标阶段为2， 冒泡阶段为3

什么是事件委托？

• 事件委托是指利用“事件冒泡”，只通过指定一个事件处理程序，来管理某一类型的所有事件；
• 当此事件处理程序被触发时，通过当前事件对象中的target来确认究竟是在哪个元素触发的事件，从而达到一次注册 处理多个元素触发事件的目的；

eg: 如何给一个超长的商品列表中的每个商品绑定一个点击事件啊？如何解决大量事件绑定造成的内存开销问题（简单实现）？     

var box = document.getElementById('box')
box.onclick = function(event) { // DOM0级事件处理程序
  var target = event.target;
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

 

从八道面试题看JavaScript DOM事件机制

• https://segmentfault.com/a/1190000013894510