----- 事件 -----


 鼠标事件
示例 
//点击触发  'click'
id.addEventListener('click', function() {
  //执行的代码块
});
 
//双击触发  'dblclick'
id.addEventListener('dblclick', function() {
  //执行的代码块
});
 
//按下触发  'mousedown'
id.addEventListener('mousedown', function() {
  //执行的代码块
});
 
//松开触发  'mouseup'
id.addEventListener('mouseup', function() {
  //执行的代码块
});
 
//元素上移动（持续触发） 'mousemove'
id.addEventListener('mousemove', function() {
  //执行的代码块
});
 
//移动到元素触发  'mouseover'
id.addEventListener('mouseover', function() {
  //执行的代码块
});
 
//移出元素触发  'mouseout'
id.addEventListener('mouseout', function() {
  //执行的代码块
});

 键盘事件
仅对输入、选择类控件有效
示例 
//按任意键触发  'keydown'
id.addEventListener('keydown', function() {
  //执行的代码块
});
 
//指定按键触发  'keydown'
id.addEventListener('keydown', function() {
  if (event.key === 'Enter') {
      //执行的代码块
      alert(event.key);
  }
});
 
//松开按键触发  'keyup'
id.addEventListener('keyup', function() {
  //执行的代码块
});

 表单事件
示例 
//表单被提交触发  'submit'
id.addEventListener('submit', function() {
  //执行的代码块
});
 
//元素改变并失去焦点触发  'change'
id.addEventListener('change', function() {
  //执行的代码块
});
 
//元素获得焦点触发  'focus'
id.addEventListener('focus', function() {
  //执行的代码块
});
 
//元素失去焦点触发  'blur'
id.addEventListener('blur', function() {
  //执行的代码块
});
 
//输入框内容更改触发  'input'
id.addEventListener('input', function() {
  //执行的代码块
});

 窗口事件
仅对输入、选择类控件有效
示例 
//页面加载完成触发  'load'
window.addEventListener('load', function() {
  //执行的代码块
});
 
//窗口大小改变时触发  'resize'
window.addEventListener('resize', function() {
  //执行的代码块
});
 
//用户滚动窗口或元素的滚动条时触发  'scroll'
window.addEventListener('scroll', function() {
  //执行的代码块
});
 
//用户离开当前页面时触发  'unload'
window.addEventListener('unload', function() {
  //执行的代码块
});

 其他事件
示例 
//页面、资源加载失败或脚本执行出错触发  'error'
document.addEventListener('error', function() {
  //执行的代码块
});
 
//文档DOM树构建完成触发  'DOMContentLoaded'
document.addEventListener('DOMContentLoaded', function() {
  //执行的代码块
});