冒泡和捕获

event.target

event.target —— 是引发事件的目标元素，它在冒泡过程中不会发生变化。。
this —— 是 “current” 元素，其中有一个当前正在运行的处理器。

停止冒泡:

event.stopPropagation() // 单个处理器
event.stopImmediatePropagation() 全部处理器

捕获

DOM 事件标准描述了事件传播的 3 个阶段：

1. 捕获阶段 —— 事件（从 Window）向下到达元素上。
2. 目标阶段 —— 事件到达目标元素。
3. 冒泡阶段 —— 事件从元素上开始冒泡。

即：对于 的单击，事件首先通过祖先链向下传递到元素（捕获），然后到达目标，最后上升（冒泡），在途中调用处理器。

要在捕获阶段捕获事件，我们需要将 *addEventListener 的第三个参数设置为 true**。

• 如果为 false（默认值），则在冒泡阶段设置处理器。
• 如果为 true，则在捕获阶段设置处理器。

事件委托

在处理器中，我们可以得到 event.target，查看事件实际发生的位置并处理它。

浏览器默认动作

• mousedown —— 开始选择（移动鼠标进行选择）。
• 在 <input type="checkbox"> 上 click —— 检查/取消选中的 input。
• submit —— 单击 <input type="submit"> 或在表单中通过单击 Enter 触发该事件，并在其后浏览器提交表单。
• wheel —— 鼠标滚轮事件的滚动将作为默认动作。
• keydown —— 按下按键可能会导致将字符添加到字段，或者触发其他动作。
• contextmenu —— 事件发生在右击时，动作是显示浏览器上下文菜单。

想要阻止默认行为 —— 可以使用 event.preventDefault() 或者 return false。第二个方法只适用于分发了 on<event>的处理器。
如果默认动作被阻止，event.defaultPrevented 的值就会变成 true，否则会变成 false。

组合键: shift、alt、ctrl 和 meta:

  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('Hooray!');
    }
  };

获取按钮：which:

有三个可能的值：

• event.which == 1 —— 左按钮
• event.which == 2 —— 中间按钮
• event.which == 3 —— 右按钮

如果我们想要禁用选择以保护内容不被复制粘贴，那么我们可以使用另一个事件：oncopy。

移动：mouseover/out，mouseenter/leave

拖放鼠标事件

ball.onmousedown = function(event) {
  let shiftX = event.clientX - ball.getBoundingClientRect().left;
  let shiftY = event.clientY - ball.getBoundingClientRect().top;
  ball.style.position = 'absolute';
  ball.style.zIndex = 1000;
  document.body.append(ball);
  moveAt(event.pageX, event.pageY);
  // 球中心在 (pageX, pageY) 坐标上
  function moveAt(pageX, pageY) {
    ball.style.left = pageX - shiftX + 'px';
    ball.style.top = pageY - shiftY + 'px';
  }
  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }
  // (3) 用 mousemove 移动球
  document.addEventListener('mousemove', onMouseMove);
  // (4) 释放球，移除不需要的处理器
  ball.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    ball.onmouseup = null;
  };
};
ball.ondragstart = function() {
  return false;
};

focus 和 blur 事件是不会向上冒泡的。

有 focusin 和 focusout 事件可以使用 — 恰好和 focus/blur 事件很像，只不过它们会向上冒泡。
值得注意的是它们必须使用 elem.addEventListener 来指定，而不是 on<event>。

 form.addEventListener("focusin", () => form.classList.add('focused'));
  form.addEventListener("focusout", () => form.classList.remove('focused'));