DOM事件相关

什么是事件委托

事件委托是将某个元素的事件处理函数委托到其他元素上，一般将子元素的事件绑定到其父级或者祖先元素上。通过冒泡机制，当子元素触发事件后真正绑定事件的外层元素会响应事件并执行事件处理函数。

最直观的例子是列表ul > li，如果想让每个<li>被点击时弹出一段内容，可以将click事件绑定到其父级<ul>上面。

委托的优点：

1. 避免重复绑定，节约内存
2. 子元素动态变化时不用重新绑定/解绑事件

如何阻止默认行为

举个栗子：在对Web表单数据进行检查时，使用onsubmit事件实现输入字段的非空检查。表单输入fastName、lastName，如果存在空，事件对象会调用preventDefault()函数，阻止表单的默认提交，并可以给出错误信息。

form.onsubmit = function(e) {
  if (fastName.value === '' || lastName.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

如何阻止事件冒泡

使用stopPropogation()函数可以阻止事件冒泡。 当事件对象调用该函数时，它仅允许当前事件处理函数执行，不会向上冒泡。

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};