事件

事件：是某事发生的信号。

• 鼠标事件：click、mouse 等
• 键盘事件：keydown、keyup
• form 事件：submit、focus
• Document 事件：DOMContentLoaded
• CSS 事件：transitionend

handler 的几种形式

处理程序（handler）

• attribute
• attribute + function
• dom property

<!-- onclick 的 this 就是 元素本身 -->
<input value="hello" onclick="alert("你好!")" type="button" />

<input value="hello" ONCLICK="__h__()" type="button" />

<script>
  function __h__() {
    alert("你好!");
  }
</script>

// onclick 是全小写的！
elem.onclick = function () {
  alert("你好");
};

// 移除handler
elem.onclick = null;

警告

js 会覆盖 html 的 onclick

不要使用 setAttribute

document.body.setAttribute("onclick", function () {
  alert(1);
});

attribute 总是 string 的,这里的函数会变为字符串！

addEventListener

element.addEventListener(event, handler, {
  once: boolean, // true 触发后自动删除监听器
  capture: boolean, // true : 在 事件传播 的 第一阶段 handler，而不是第三阶段（冒泡）
  passive: boolean, // true : 告诉浏览器 handler 不会掉用 event.preventDefault()
});

由于历史原因，以下二者等价

element.addEventListener(event, handler, true);
// 二者等同
element.addEventListener(event, handler, { capture: true });

对象形式

const obj = {
  // 对象只要有 handleEvent 就可以
  handleEvent(event) {
    console.log(event);
  },
};
element.addEventListener("click", obj);

removeEventListener

element.removeEventListener(event, handler[, options]);

handler 一定一定一定是“引用”

特殊的 hanlder

有一些 事件 ，只能通过 addEventListener 设置

如：DOMContentLoaded

event 对象

const event = {
  type: String, // 类型，比如 "click"
  currentTarget: DOM, // 与 this 一样，箭头函数需要注意
  clientX: Number,
  clientY: Number,
};