DOM 知识点总结

事件委托

指利用事件的传播机制，只需将一个eventlistener绑定到一类相似功能的元素上，而不是每个元素都绑定一个

<ul id="parent">
  <li class="child">one</li>
  <li class="child">two</li>
  <li class="child">three</li>
  ...
</ul>

<script type="text/javascript">
  //父元素
  var dom= document.getElementById('parent');

  //父元素绑定事件，代理子元素的点击事件
  dom.onclick= function(event) {
    var curTarget = event.target 
    if (curTarget.tagName.toLowerCase() == 'li') {
      // do something 事件处理
      alert('haha')
    }
  }
</script>

如果子元素内还有元素，子元素内元素被点击时也触发该子元素事件，改写代码：

<ul id="parent">
  <li class="child">one <strong>1</strong></li>
  <li class="child">two</li>
  <li class="child">three</li>
  ...
</ul>

<script type="text/javascript">
  //父元素
  var dom= document.getElementById('parent');

  //父元素绑定事件，代理子元素的点击事件
  dom.onclick= function(event) {
    var curTarget = event.target.closest('li') // 从 event.target 元素开始，搜索符合选择器的最近的祖先节点
    if (curTarget) {
      // do something 事件处理
      alert('haha')
    }
  }
</script>

事件传播有三个阶段：

1. 捕获阶段 capturing phase
2. 目标阶段 target phase：事件到达目标元素
3. 冒泡阶段 bubbling phase

事件捕获

事件先由最外层的元素捕获，再依次沿 DOM 树向下传播，直到事件到达目标元素。

另：addEventListener()第三个参数可设置为 {capture: true} 或 true，绑定事件捕获时的函数

事件冒泡

事件由目标元素开始依次沿 DOM 树向上传播且作出响应。

阻止事件冒泡

event.stopPropagation()

event.stopImmediatePropagation()

阻止默认动作

event.preventDefault() 或在on<event>里return false

如：<a href="/" onclick="return false">Click here</a>