不想看思维导图的可以看下方内容，也是思维导图上的全部内容

• 事件绑定（监听）

  • 直接绑定
    • obj.on事件名=函数名
  • 高级事件绑定
    • addEventListener
      • 语法：obj.addEventListener(事件名，函数名，是否捕获)
      • 注意：事件名无前缀on 是否捕获参数默认为false

• 事件解绑

  • 直接绑定解绑
    • obj.on事件名=null
  • 高级事件绑定的解除
    • removeEventListener
      • 语法：obj.removeEventListener(事件名，函数名，是否捕获)

• 事件对象

  • event

    • 功能：表示事件的状态，如事件在其中发生的元素，键盘的按键状态，鼠标的位置，鼠标按钮的状态
    • 属性：
      • clientX：返回鼠标位置对于浏览器窗口左上角的水平坐标（单位像素）
      • clientY: 返回鼠标位置相对于浏览器窗口左上角的垂直坐标（单位像素）
      • movementX: 返回当前位置与上一个mousemove事件之间的水平距离（单位像素）
      • movementY: 返回当前位置与上一个mousemove事件之间的垂直距离（单位像素）
      • screenX: 返回鼠标位置相对于屏幕左上角的水平坐标（单位像素）
      • screenY：返回鼠标位置相对于屏幕左上角的垂直坐标（单位像素）
      • offsetX：返回鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素）
      • offsetY：返回鼠标位置与目标节点上方的padding边缘的垂直距离（单位像素）
      • pageX：返回鼠标位置与文档左侧边缘的距离（单位像素）
      • pageY：返回与文档上侧边缘的距离（单位像素）
      • target：返回事件的目标节点（触发该事件的节点）

• 事件停止传播与阻止行为

  • 停止事件传播
    • ev.stopPropagation()
  • 阻止行为
    • ev.preventDefault()

• 鼠标事件" class="reference-link">鼠标事件

  • click：按下鼠标（通常是按下主按钮）时触发。
  • dblclick：在同一个元素上双击鼠标时触发。
  • mousedown：按下鼠标键时触发。
  • mouseup：释放按下的鼠标键时触发。
  • mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
  • mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
  • mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
  • mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
  • mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。
  • contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
  • wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。
    • 属性：wheelDelta 向上：120 向下：-120

• 键盘事件

  • keydown：按下键盘时触发。
  • keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
  • keyup：松开键盘时触发该事件。
  • 相关属性：
    • KeyboardEvent.altKey：是否按下 Alt 键
    • KeyboardEvent.ctrlKey：是否按下 Ctrl 键
    • KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是一个四瓣的小花，Windows 系统是 windows 键）
    • KeyboardEvent.shiftKey：是否按下 Shift 键
    • KeyboardEvent.key（最简单快捷）
      • 返回一个字符串，表示按下的键名。该属性只读。
      • 如果按下的键代表可打印字符，则返回这个字符，比如数字、字母。
      • 如果按下的键代表不可打印的特殊字符，则返回预定义的键值，比如 Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F1～F12，NumLock，Scroll 等。
      • 如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下 Ctrl + a，则返回a；按下 Shift + a，则返回大写的A。
    • KeyboardEvent.repeat：返回一个布尔值，代表该键是否被按着不放

• 进度事件

  • abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。
  • error：由于错误导致外部资源无法加载时触发。
  • load：外部资源加载成功时触发。
  • loadstart：外部资源开始加载时触发。
  • loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。
  • progress：外部资源加载过程中不断触发。
  • timeout：加载超时时触发。

• 表单事件

  • blur:元素失去焦点时触发
  • focus:元素获得焦点时触发
  • change:表单内容发生改变时触发
  • reset:表单重置时触发
  • submit:元素提交时触发
  • input:元素获取用户输入时触发
  • search:用户向搜索域输入文本时触发
  • select:用户选取文本时触发

• 触摸事件

  • Touch：一个触摸点
  • TouchList：多个触摸点的集合
  • TouchEvent：触摸引发的事件实例

• 拖拉事件

  • drag：拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。
  • dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
  • dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
  • dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
  • dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
  • dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
  • drop：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下 ESC 键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

• beforeunload事件

  • 在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。

• unload事件

  • 在窗口关闭或者document对象将要卸载时触发。它的触发顺序排在beforeunload、pagehide事件后面。

• session历史事件

  • pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况，
    • 第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发
    • 第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发
  • pagehide事件与pageshow事件类似，当用户通过“前进/后退”按钮，离开当前页面时触发
  • popstate事件在浏览器的history对象的当前记录发生显式切换时触发
  • hashchange事件在 URL 的 hash 部分（即#号后面的部分，包括#号）发生变化时触发。该事件一般在window对象上监听。

• 网页状态事件

  • DOMContentLoaded 事件 网页下载并解析完成以后，浏览器就会在document对象上触发
  • readystatechange事件当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发。

• 窗口事件

  • scroll事件 在文档或文档元素滚动时触发，主要出现在用户拖动滚动条。
  • resize事件在改变浏览器窗口大小时触发，主要发生在window对象上面
  • fullscreenchange事件在进入或退出全屏状态时触发，该事件发生在document对象上面。
  • fullscreenerror事件在浏览器无法切换到全屏状态时触发。

• 剪贴板事件

  • cut：将选中的内容从文档中移除，加入剪贴板时触发。
  • copy：进行复制动作时触发。
  • paste：剪贴板内容粘贴到文档后触发。

• 焦点事件

  • focus：元素节点获得焦点后触发，该事件不会冒泡。
  • blur：元素节点失去焦点后触发，该事件不会冒泡。
  • focusin：元素节点将要获得焦点时触发，发生在focus事件之前。该事件会冒泡。
  • focusout：元素节点将要失去焦点时触发，发生在blur事件之前。该事件会冒泡。
  • 这四个事件的事件对象都继承了FocusEvent接口。FocusEvent实例具有以下属性。
  • FocusEvent.target：事件的目标节点。
  • FocusEvent.relatedTarget：对于focusin事件，返回失去焦点的节点；对于focusout事件，返回将要接受焦点的节点；对于focus和blur事件，返回null。
  • 注意事项：由于focus和blur事件不会冒泡，只能在捕获阶段触发，所以addEventListener方法的第三个参数需要设为true。