DOM必考题

DOM事件模型

每一个事件都会先经历从上到下的捕获阶段，再经历从下到上的冒泡阶段。添加事件监听时候addEventListener(’click’,fn,true/false) 第三个参数可以选择阶段。true表示把它放到捕获阶段，false或者不传把它放到冒泡阶段。在这两个阶段希望停止传播（捕获/冒泡到一个div就不要往下走了）可以使用 event.stopPropagation() 来阻止捕获或冒泡。

手写事件委托

BUG版（正确答案）

 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn()// 执行某个函数
     }
 })

bug 在于，如果用户点击的是 li 里面的 span，就没法触发 fn，这显然不对。

好处 1. 节省监听器 2. 实现动态监听
坏处 调试比较复杂，不容易确定监听者。

高级版 思路是点击 span 后，递归遍历 span 的祖先元素看其中有没有 ul 里面的 li。

function delegate(element, eventType, selector, fn) {
	element.addEventListener(eventType, e => {
	  let el = e.target
	  while (!el.matches(selector)) {
	    if (element === el) {
	      el = null
	      break
	    }
	    el = el.parentNode
	  }
	  el && fn.call(el, e, el)
	})
	return element
}

delete(ul, 'click', 'li', f1)