8、解构赋值、let、箭头函数、类（ES6和TS）与继承、模板规范、commonJS模块、AMD|CMD|UMD；空对象|无属性、数据类型、闭包与内存泄漏、函数节流、函数去抖、柯里化函数、点透、Error对象、Js三大事件、Date实例、for循环、二级事件、BOM、DOM、js事件汇总

一、解构赋值
var person = {name: 'zhangsan', address: {province: '江苏', city: '南京'}};
var {name, address:{province, city}}=person;
console.log(name, province, city);

二、var与let的区别  
1、var
for(var j=0;j<10;j++){
  b[j]=function(){
    console.log(j);
  };
}
b[6](); 
2、let
var a=[];
for(let i=0;i<10;i++){
  a[i]=function(){
    console.log(i);
  };
}
a[6](); 
3、let转为var
var a = [];
for (var i = 0; i < 10; i++) {
  (function (i) {
    a[i] = function () {
      console.log(i);
    };
  })(i)
}
a[6]();

三、箭头函数的this
通过哪个对象能获取宿主对象，哪个对象就是宿主对象的this，即箭头函数的this
示例一
var value = 6;
var obj = {
  value: 5,
  fn: function fnIn() {
    setTimeout(() => {
      console.log(this.value); //5，通过obj对象能获取宿主对象fnIn
    });
  },
};
obj.fn();
示例二
var value = 6;
var obj = {
  value: 5,
  fn: () => {
    console.log(this.value); //6，通过window对象能获取宿主对象obj
  },
};
obj.fn();

四、箭头函数和普通函数的区别（new、arguments、this、call、apply、prototype、Generator、yield），
1、箭头函数作为匿名函数,是不能作为构造函数的,不能使用new，
2、箭头函数不绑定arguments,取而代之用rest参数…解决，
3、箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，即箭头函数所在对象的 this，
4、使用call()和apply()调用只是传入了参数而已，对 this 并没有什么影响，
5、箭头函数没有原型属性prototype，
6、箭头函数不能当做Generator函数,不能使用yield关键字，
7、箭头函数参数：0或多个参数，需要用()；1个参数，不需要()，
8、箭头函数函数体：多个分句，用{}和return；1个分句，不用{}和return；1个分句，返回值为对象，用({})。

五、普通函数与箭头函数对照
1、普通函数：function fn(){return 5}
箭头函数：var fn=()=>{return 5}
2、普通函数：function fn(v){return 5}
箭头函数：var fn=(v)=>v
3、普通函数：map(function(){return 5})
箭头函数：map(()=>5)
4、普通函数：map(function(v){return 5})
箭头函数：map(v=>5)
附：var 变量=(参数)=>函数体

六、ES6和TS的类和实例
1、ES6的属性、方法、继承
（1）在类中定义的属性，是实例的属性。相当于ES5中实例的构造函数。
（2）在类中定义的属性前，加上static，那么该属性就是静态属性即类本身的属性，通过类名.aaa来获取。
（3）在类中定义的方法，是实例的方法。相当于ES5中实例的原型。
（4）在类中定义的方法前，加上static，那么该方法就是静态方法即类本身的方法，通过类名.aaa来调用。方法可以被子类继承，通过子类名.aaa来调用，里面的this指的是类而不是实例。
（5）ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。
（6）ES6的继承，实质是先创造父类的实例对象this，然后再用子类的构造函数修改this。子类内部的super是父类的构造函数，必须首先调用。
（7）static的内容，在ES5中，只能写在类AAA的外部，通过AAA.bbb定义、获取、调用。
//以下实例必须在浏览器控制台里运行，不能在node环境里运行
class Parent {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  getX() {
    console.log("this为Parent实例，实例的getX方法被调用，实例的x为：" + this.x);
  }
  static name = "animal";
  static age = "20";
  static getY() {
    console.log("this为Parent类，类的getY方法被调用，类的name为：" + this.name);
  }
}
class Son extends Parent {
  constructor(...props) {
    super(...props);
    this.z = 4;
  }
}
var parent = new Parent(2, 3);
var son = new Son(2, 3);
parent.getX();
Parent.getY();
son.getX();
Son.getY();
console.log(parent.x, parent.y);
console.log(Parent.name, Parent.age);
console.log(son.x, son.y, son.z);
2、TS的类和实例
知识来源，https://www.tslang.cn/docs/handbook/classes.html
代码运行，https://www.json.cn/runcode/run_typescript/
（1）公共public：类内可访问、子类内可访问、实例可访问、子实例可访问
（2）受保protected：类内可访问、子类内可访问
（3）私有private：类内可访问
class Person {
  public pubName: string;
  protected proName: string;
  /* protected */ constructor(pubName: string,proName: string) { 
      this.pubName = pubName; 
      this.proName = proName; 
  };
}
class Employee extends Person {
  public departmentA: string;
  protected departmentB: string;
  private departmentC: string;
  constructor(pubName: string,proName: string, department: string) {
    super(pubName,proName);
    this.departmentA = department;
    this.departmentB = department;
    this.departmentC = department;
    console.log(this.departmentC+"A:类内可访问，private")
    console.log(this.departmentB+"B:类内可访问,protected")
    console.log(this.proName+":子类可访问,protected")
    console.log(this.departmentA+"C:类内可访问,public")
    console.log(this.pubName+":子类可访问,public")
  }
}
console.log(new Employee("姓名人A","姓名人B", "售货员").departmentA+"D:实例可访问,public")
console.log(new Employee("姓名人A","姓名人B", "售货员").pubName+"D:实例可访问,public")

七、ES6中模块规范（在前端模块化开发中使用）
import abc,{ABC} from "./def" 指的是，def.js模块默认导出了abc，普通导出了ABC
1、export普通导出和import引入（导出时用什么名，引入时就用什么名）
（1）直接导出
export var abc="abc";
export function ABC(){};
（2）先定义，再导出
var abc="abc";
function ABC(){};
export {acb,ABC}
（3）上面对应的import引入为
import {abc,ABC} from "./abc"
2、export默认导出和import引入
（1）直接默认导出
export default function (){};
export default function ABC(){};
（2）先定义，再默认导出
function ABC(){};
export default ABC;
（3）上面对应的import引入为
import DEF from "./abc"
3、export改名导出和import引入
（1） var abc="abc";
function ABC(){};
export {abc as abc1,ABC as ABC1}
（2）上面对应的import引入为
import {abc1,ABC1} from "./abc";
import {abc1 as abc2,ABC1 as ABC2} from "./abc";
4、module.exports原名导出，import改名引入
（1）导出方式为：router.js下有module.exports = VueRouter;
（2）引入方式为：import myRouter from './router'

八、CommonJS中模块规范（在后台nodejs开发中使用，在前端框架处理兼容时使用）
1、导出模块
（1）module.exports = obj;
2、导入模块
（1）var example = require('./example.js');
（2）var area = example.area;//使用模块 
     
九、AMD、CMD、UMD模块规范
1、AMD和require.js，AMD依赖模块加载跳过所有异步，运行后面的回调函数，运行中所有依赖模块的语句，都定义在另一个回调函数中，等到加载完成之后，这个回调函数才会运行。
(1)定义模块
define("abc", ["a", "b", "c", 'd'], function (a, b, c, d) {
  var a = require('a');
});
(2)引用模块
require(['abc','def'],function(abc,def){});
2、CMD和sea.js，在回调函数里，需要某个依赖，才会加载这个依赖。
(1)定义模块
define("abc", ["a", "b", "c", 'd'], function (require, exports, module) {
  var a = require('a');
});
(2)引用模块
seajs.require("abc")
3、UMD用于判断代码运行环境
（1）UMD：Universal Module Definition，通用模块定义
（2）UMD实例
(function fn(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object'){//非原生commonjs环境下，如nodejs环境
    module.exports = factory();
  }else if(typeof define === 'function' && define.amd){//AMD环境下，如requirejs加载器
    define([], factory);
  }else if(typeof define === "function" && define.cmd){//CMD环境下，如seajs加载器，一个模块就是一个文件
    define([], factory);
  }else if(typeof exports === 'object'){//原生commonjs环境下
    exports["aaa"] = factory();
  }else if(typeof self === 'object'){//使用了web worker技术的服务器环境，不会影响页面的性能。
    self["aaa"] = factory();
  }else if(typeof global === 'object'){//如果所有的全局环境变量都统一为global
    self["aaa"] = factory();
  }else{//其它环境下，如window
    root["aaa"] = factory();
  }        
})(this, function() {})

十、js判断空对象或无属性的几种方法 
var obj={};
1、Object.keys()，可枚举属性组成的数组
console.log(Object.keys(obj).length == 0);
2、Object.getOwnPropertyNames()，包括可、不可枚举属性组成的数组
console.log(Object.getOwnPropertyNames(obj).length == 0);
3、用JSON.stringify()将对象转为字符串与"{}"进行比较
console.log(JSON.stringify(obj)=="{}")//空对象里有空格，字符串里没有空格，结果也是true  
4、for…in循环
使用for in循环可以遍历所有属性以次判断对象是否为空对象
function isEmptyObject(obj){
    for(var key in obj){
        return false
    };
    return true
};
console.log(isEmptyObject(obj));
原文链接：https://blog.csdn.net/watercatmiao/article/details/84261015
5、判断对象obj里有没有key属性
（1）用if(obj.key)判断不准确，后面几种情况都为false：obj={key:0},obj={key:false},obj={key:null},obj={key:undefined}
（2）用if("key" in obj)判断最准确，后面几种情况也为true：obj={key:0},obj={key:false},obj={key:null},obj={key:undefined}

十一、js判断数据类型的几种方法
来源：https://www.cnblogs.com/dushao/p/5999563.html
1、typeof，返回值是字符串并且首字母小写，可以判断function数据类型，在判断非Object类型的数据时比较方便。
var myString = "he is string";
var myNumber = 222;
var myArray= [1,2,3];
var myDate = new Date();
var myObject = {a:1};
var myFunction = function(){console.log(111);};
console.log(typeof myString)   // string
console.log(typeof myNumber)   // number
console.log(typeof myArray)   // object
console.log(typeof myDate)   // object
console.log(typeof myObject)   // object
console.log(typeof myFunction)   // function
console.log(typeof myNumber == "number") // true
2、instanceof，返回值是布尔并且首字母小写
var myString = "he is string";
var myNumber = 222;
var myArray= [1,2,3];
var myDate = new Date();
var myObject = {a:1};
var myFunction = function(){console.log(111);};
console.log(myString instanceof String) // true
console.log(myNumber instanceof Number) // true
console.log(myArray instanceof Array) // true
console.log(myDate instanceof Date) // true
console.log(myObject instanceof Object) // true
console.log(myFunction instanceof Function) // true　
3、constructor，返回值是对象并且首字母大写
var myString = "he is string";
var myNumber = 222;
var myArray= [1,2,3];
var myDate = new Date();
var myObject = {a:1};
var myFunction = function(){console.log(111);};
console.log(myString.constructor === String) // true
console.log(myNumber.constructor === Number) // true
console.log(myArray.constructor === Array) // true
console.log(myDate.constructor === Date) // true
console.log(myObject.constructor === Object) // true
console.log(myFunction.constructor === Function) // true　
4、prototype，返回值是(数组)字符串。
var myString = "he is string";
var myNumber = 222;
var myArray= [1,2,3];
var myDate = new Date();
var myObject = {a:1};
var myFunction = function(){console.log(111);};
console.log(Object.prototype.toString.call(myString) === "[object String]") // true;
console.log(Object.prototype.toString.call(myNumber) === "[object Number]") // true;
console.log(Object.prototype.toString.call(myArray) === "[object Array]") // true;
console.log(Object.prototype.toString.call(myDate) === "[object Date]") // true;
console.log(Object.prototype.toString.call(myObject) === "[object Object]") // true;
console.log(Object.prototype.toString.call(myFunction) === "[object Function]") // true;
5、jquery.type()
var myUndefined=undefined;
var myNull=null;
var myString = "he is string";
var myNumber = 222;
var myArray= [1,2,3];
var myDate = new Date();
var myObject = {a:1};
var myFunction = function(){console.log(111);};
var myError = new Error();
var myRegexp = /test/;
console.log(jQuery.type(myUndefined) === "undefined");
console.log(jQuery.type(myNull) === "null");
console.log(jQuery.type(myString) === "string");
console.log(jQuery.type(myNumber) === "number");
console.log(jQuery.type(myArray ) === "array");
console.log(jQuery.type(myDate) === "date");
console.log(jQuery.type(myFunction) === "function");
console.log(jQuery.type(myError) === "error");
console.log(jQuery.type(myRegexp) === "regexp");
6、Symbol（从以下应用实例来看，不易传实参，Symbol并无大用）
var race = {
  protoss: 'protoss', 
  terran: 'terran', 
  zerg: 'zerg' 
}
var race = {
  protoss: Symbol(),
  terran: Symbol(),
  zerg: Symbol()
}
function createRole(type){
  if(type === race.protoss){创建神族角色}
  else if(type === race.terran){创建人族角色}
  else if(type === race.zerg){创建虫族角色}
}

十二、闭包与内存泄漏
1、闭包简略定义
（1）函数内部不会受外部干扰，这种机制叫做闭包。
（2）有权访问另一个函数作用域中的变量的函数，叫做闭包。
2、闭包详细定义及来源
（1）内部函数可以访问外部函数作用域，外部函数不能直接访问内部函数的作用域，即函数内部不会受外部干扰。函数的这种机制叫做闭包。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
（2）有权（能夠）访问另一个函数作用域中的变量的函数。《JavaScript高级程序设计》第178页
3、闭包优缺点
好处：避免污染全局变量；
坏处：有可能造成内存泄漏；
4、内存泄漏的条件和使用情形：
（1）条件：函数里面的函数作为返回值被函数外面的变量引用；两函数中间的变量需要自增时使用
（2）使用情形：两函数中间的变量需要自增；多个元素对象循环绑定事件
for(var i=0; i<aBtn.length; i++){
  //自执行函数里面的函数(click)被自执行函数外面的变量aBtn[index].onclick引用
  (function(index){
    aBtn[index].onclick=function click(){
      alert(index);
    }
  })(i);
}

十三、节流、去抖和柯里化
1、函数节流（throttle）：不重新开始计时。
（1）节流写法一
ele.on("mousemove", (function () {
  var last = 0;
  return function () {
    var curr = +new Date();
    if (curr - last > 200) {
      //具体逻辑在此书写
      last = curr;
    }
  };
})());
（2）节流写法二
var throttle = function (delay, action) {
  var last = 0;
  return function () {
    var curr = +new Date();
    if (curr - last > delay) {
      action.apply(this, arguments);
      last = curr;
    }
  };
};
var action = function () {};//具体逻辑在此书写
var fn = throttle(200, action);
ele.on('mousemove', fn);
2、函数去抖（debounce）：重新开始计时。
（1）去抖写法一
ele.on("mousemove", function () {
  var last = 0;
  return function () {
    var curr = +new Date();
    if (curr - last > 200) {
      //具体逻辑在此书写
    }
    last = curr; //与函数节流的区别
  };
});
（2）去抖写法二
var throttle = function (delay, action) {
  var last = 0;
  return function () {
    var curr = +new Date();
    if (curr - last > delay) {
      action.apply(this, arguments);
    }
    last = curr; //与函数节流的区别
  };
};
var action = function () {};//具体逻辑在此书写
var fn = throttle(200, action);
ele.on("mousemove", fn);
3、柯里化函数：把接受多个参数的函数变换成接受（第）一个参数的函数，然后用返回值函数接受余下的参数并返回结果。
js 如何实现sum(2,3)===sum(2)(3)
function sum() {
  var arguments0 = arguments[0];
  if (arguments.length === 1) {
    return function (arguments1) {
      return arguments0 + arguments1;
    }
  }
  if (arguments.length === 2) {
    return arguments[0] + arguments[1]
  }
}
console.log(sum(2,3)==sum（2）（3）);

十四、点透
1、点透发生的原因：手指单击移动端浏览器，系统立即生成touch事件，如果touch执行的结果是该元素从文档树上消失，300ms后系统要触发click的时候，发现该元素的位置是a或input元素，那么把click事件作用在这个元素上面了，这个现象给人的感觉就是”点透“了。
2、单击事件延迟300毫秒执行的原因：移动端浏览器要观察用户是否进行第2次点击，进而判断用户是想单击页面，还是想双击缩放页面。
3、解决方案：在touch事件里，通过阻止默认（单击）事件或延迟执行，来解决因单击而产生的点透问题。
（1）阻止默认事件
ele.addEventListener("touchend",function (event) {
    ele.style.display="none";
    event.preventDefault();
});
//以下zepto的tap事件点透解决
ele.on("touchend", function (e) {
    $("#alertBox").hide();
    e.preventDefault();
});
（2）定时器延迟
ele.addEventListener("touchend",function (event) {
    setTimeout(function () {
        ele.style.display="none";
    },400);
});
//以下zepto的tap事件点透解决
ele.on("touchend", function () {
    setTimeout(function () {
       $("#alertBox").hide();
    }, 350);
});

十五、js 错误Error对象详解
来源：https://www.jb51.net/article/124210.htm
指程序中的非正常运行状态，在其他编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象，其中包含错误的描述信息。ECMAScript定义了六种类型的错误。除此之外，还可以使用Error构造方法创建自定义的Error对象，并使用throw语句抛出该对象。
1、ReferenceError:引用错误，例如变量没定义，console.log(b) // Uncaught ReferenceError: b is not defined
2、TypeError:类型错误，例如用数字调用函数方法，123() // Uncaught TypeError: 123 is not a function
3、SyntaxError:语法错误，例如变量名首字符为数字，var 1a // Uncaught SyntaxError: Unexpected number
4、RangeError:使用内置对象的方法时，参数超范围，例如[].length = -5 // Uncaught RangeError: Invalid array length
5、URIError:URI错误，例如decodeURI("%") // Uncaught URIError: URI malformed at decodeURI
6、EvalError:错误的使用了Eval，在ES5以下的JavaScript中，当eval()函数没有被正确执行时，会抛出evalError错误。
函数的定义者需要告知函数的调用者此处出错，本函数内，剩下的代码不再执行；如throw new Error("提示文字")；
手动抛错：throw new Error("参数必须是数组或对象类型")

十六、Js三大事件
来源：https://www.runoob.com/tags/ref-eventattributes.html
1、鼠标事件
（1）click：单击
（2）dblclick：双击
（3）mousedown：鼠标按下
（4）mouseup：鼠标抬起
（5）mouseover：鼠标悬浮
（6）mouseout：鼠标离开
（7）mousemove：鼠标移动
（8）mouseenter：鼠标进入
（9）mouseleave：鼠标离开
2、键盘事件（鼠标在哪个地方聚焦，键盘事件就作用在哪个地方）
（1）keydown：按键按下
（2）keyup：按键抬起
（3）keypress：按键按下抬起
3、HTML事件（窗口事件、表单事件）
（1）load：文档加载完成
（2）select：被选中的时候
（3）change：内容被改变
（4）focus：得到光标
（5）resize：窗口尺寸变化
（6）scroll：滚动条移动

十七、Date实例
1、参数问题
console.log( new Date().getMonth() )
console.log( '000000000000000' )
console.log( new Date("2017-6-2").getMonth() )
console.log( new Date("2017-6-2 12:00:00").getMonth() )
//后台给前端的数据格式，如果与上面不一致，那么应由前端转换为此格式，然后才可以使用laydate插件
console.log( new Date("2017/6/2").getMonth() )
console.log( new Date("2017/6/2 12:00:00").getMonth() )//后台给前端的数据样式
console.log( '111111111111111' )
console.log( new Date("6 2,2017").getMonth() )
console.log( new Date("6 2,2017 12:00:00").getMonth() )
console.log( new Date("6,2,2017").getMonth() )
console.log( new Date("6,2,2017 12:00:00").getMonth() )
console.log( '222222222222222' )
console.log( new Date("Jun 2,2017").getMonth() )
console.log( new Date("Jun 2,2017 12:00:00").getMonth() )
console.log( new Date("Jun,2,2017").getMonth() )
console.log( new Date("Jun,2,2017 12:00:00").getMonth() )
console.log( new Date("Jun/2/2017").getMonth() )
console.log( new Date("Jun/2/2017 12:00:00").getMonth() )
console.log( '3333333333333333' )
//以上：没有参数或字符串作为参数，getMonth的值都比实际少1
//以下：数字参数，getMonth的值和实际一致
console.log( new Date(2017,6,2).getMonth() )
console.log( new Date(2017,6,2,10,59,59,999).getMonth() )
console.log( new Date(1498964399999).getMonth() )
2、获取毫秒数的4种方法：
console.log( +new Date() )
console.log( new Date().getTime() )
console.log( new Date().valueOf() )
console.log( new Date()*1 )

十八、for循环
1、三种写法
for (语句 1; 语句 2; 语句 3){
  //被执行的代码块
  //语句1：在循环前执行
  //语句2：循环的条件
  //语句3：在循环后执行，缺失不会报错
}
（1）写法一
for(var i=0;i<10;i++){
  console.log(i);
  //如果我们用for循环要输出0到9，我们可以这么写
}
（2）写法二
for(var i=10;i-=2;){//循环条件（为真时）、循环方式（递减），合二为一
  console.log(i);
  //在语句2中，如果返回true循环会继续执行。在js中0,null,undefined,false,'',””作为条件判断时，其结果为false，也就说当i--到0的时候就是false，循环就终止了。
}
（3）写法三
var rules = [-2, -1, 0, 2, 1];
for (var i = 0, rule; rule = rules[i++];) {
  console.log(rule);
  //var i = 0, rule;这是声明变量，是语句1,在循环前执行;
  //rule = rules[i++];这是循环的条件，是语句2;当成为undefined时就会终止循环。
}
2、特殊案例
for(var i=0,j=0;i<10,j<6;i++,j++){
  var k=j+i;
}
console.log(i,j,k);//6,6,10

for(let i=0,j=0;i<10,j<6;i++,j++){
  let k=j+i;
}
console.log(i,j,k);//i is not defined

十九、二级事件
1、事件对象：e=e||window.event
2、事件类型：e.type
3、事件源：e.target=e.target||e.srcElement;
4、阻止默认事件：e.preventDefault?e.preventDefault():e.returnValue=false;
5、阻止冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
6、DOM加载完成：
（1）标准：DOMContentLoaded；
（2）IE：readyStateChange
7、事件监听：
（1）标准：addEventlistener(“click”,function(){},false)；
（2）IE：Attachment(“onclick”,function(){})
8、this：
（1）标准：this为当前元素；
（2）IE：this为window
9、方法绑定与执行：
（1）标准：同一事件的相同方法不能重复绑定，按顺序执行；
（2）IE：同一事件的相同方法能重复绑定，随机执行；
10、DOM二级事件绑定原理
（1）标准与IE都会给元素默认开辟一个事件池，把所有方法都依次存到事件池中；
（2）可以给当前某一元素绑定多个方法
11、事件流：
（1）捕获：从外向内；
（2）事件源：发生事件的元素；
（3）冒泡：从里向外
 
二十、BOM和DOM
1、BOM（浏览器对象模型）
Window 对象
Navigator 对象
Screen 对象
History 对象
Location 对象
存储对象
2、DOM（文档对象模型）
HTML DOM Document 对象
HTML DOM 元素对象
HTML DOM 属性对象
HTML DOM 事件对象
HTML DOM Console 对象
CSSStyleDeclaration 对象
DOM HTMLCollection

二十一、js事件汇总
来源：https://www.runoob.com/jsref/dom-obj-event.html
1、浏览器窗口事件
（1）基本事件
onabort    图像的加载被中断。 ( <object>)
onbeforeunload    该事件在即将离开页面（刷新或关闭）时触发
onerror    在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)     
onhashchange    该事件在当前 URL 的锚部分发生修改时触发。     
onload    一张页面或一幅图像完成加载。
onpageshow    该事件在用户访问页面时触发    
onpagehide    该事件在用户离开当前网页跳转到另外一个页面时触发    
onresize    窗口或框架被重新调整大小。
onscroll    当文档被滚动时发生的事件。
onunload    用户退出页面。 ( <body> 和 <frameset>)
onafterprintNew    在打印文档之后运行脚本
onbeforeprintNew    在文档打印之前运行脚本
onbeforeonloadNew    在文档加载之前运行脚本
onerrorNew    当错误发生时运行脚本
onhashchangeNew    当文档改变时运行脚本
onload    当文档加载时运行脚本
onmessageNew    当触发消息时运行脚本
onofflineNew    当文档离线时运行脚本
ononlineNew    当文档上线时运行脚本
onpagehideNew    当窗口隐藏时运行脚本
onpageshowNew    当窗口可见时运行脚本
onpopstateNew    当窗口历史记录改变时运行脚本
onredoNew    当文档执行再执行操作（redo）时运行脚本
onresizeNew    当调整窗口大小时运行脚本
onstorageNew    当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundoNew    当文档执行撤销时运行脚本
onunloadNew    当用户离开文档时运行脚本
onafterprint    该事件在页面已经开始打印，或者打印窗口已经关闭时触发     
onbeforeprint    该事件在页面即将开始打印时触发     
（2）多媒体（Media）事件
onabort    事件在视频/音频（audio/video）终止加载时触发。     
oncanplay    事件在用户可以开始播放视频/音频（audio/video）时触发。     
oncanplaythrough    事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。     
ondurationchange    事件在视频/音频（audio/video）的时长发生变化时触发。     
onemptied    当期播放列表为空时触发     
onended    事件在视频/音频（audio/video）播放结束时触发。     
onerror    事件在视频/音频（audio/video）数据加载期间发生错误时触发。     
onloadeddata    事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。     
onloadedmetadata    事件在指定视频/音频（audio/video）的元数据加载后触发。     
onloadstart    事件在浏览器开始寻找指定视频/音频（audio/video）触发。     
onpause    事件在视频/音频（audio/video）暂停时触发。     
onplay    事件在视频/音频（audio/video）开始播放时触发。     
onplaying    事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。     
onprogress    事件在浏览器下载指定的视频/音频（audio/video）时触发。     
onratechange    事件在视频/音频（audio/video）的播放速度发送改变时触发。     
onseeked    事件在用户重新定位视频/音频（audio/video）的播放位置后触发。     
onseeking    事件在用户开始重新定位视频/音频（audio/video）时触发。     
onstalled    事件在浏览器获取媒体数据，但媒体数据不可用时触发。     
onsuspend    事件在浏览器读取媒体数据中止时触发。     
ontimeupdate    事件在当前的播放位置发送改变时触发。     
onvolumechange    事件在音量发生改变时触发。     
onwaiting    事件在视频由于要播放下一帧而需要缓冲时触发。     
（3）动画事件
animationend    该事件在 CSS 动画结束播放时触发     
animationiteration    该事件在 CSS 动画重复播放时触发     
animationstart    该事件在 CSS 动画开始播放时触发     
（4）过渡事件
transitionend    该事件在 CSS 完成过渡后触发。
onmessage    该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发     
onmousewheel    已废弃。 使用 onwheel 事件替代     
ononline    该事件在浏览器开始在线工作时触发。     
onoffline    该事件在浏览器开始离线工作时触发。     
onpopstate    该事件在窗口的浏览历史（history 对象）发生改变时触发。     
onshow    该事件当 <menu> 元素在上下文菜单显示时触发     
onstorage    该事件在 Web Storage(HTML 5 Web 存储)更新时触发     
ontoggle    该事件在用户打开或关闭 <details> 元素时触发     
onwheel    该事件在鼠标滚轮在元素上下滚动时触发

二十二、DOM事件
（1）鼠标事件
onclick    当用户点击某个对象时调用的事件句柄。
oncontextmenu    在用户点击鼠标右键打开上下文菜单时触发     
ondblclick    当用户双击某个对象时调用的事件句柄。
onmousedown    鼠标按钮被按下。
onmouseenter    当鼠标指针移动到元素上时触发。
onmouseleave    当鼠标指针移出元素时触发
onmousemove    鼠标被移动。
onmouseover    鼠标移到某元素之上。
onmouseout    鼠标从某元素移开。
onmouseup    鼠标按键被松开。
（2）键盘事件
onkeydown    某个键盘按键被按下。
onkeypress    某个键盘按键被按下并松开。
onkeyup    某个键盘按键被松开。
（3）表单事件
onblur    元素失去焦点时触发
onchange    该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
onfocus    元素获取焦点时触发
onfocusin    元素即将获取焦点时触发
onfocusout    元素即将失去焦点时触发
oninput    元素获取用户输入时触发    3
onreset    表单重置时触发
onsearch    用户向搜索域输入文本时触发 ( <input="search">)     
onselect    用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit    表单提交时触发
（4）剪贴板事件
oncopy    该事件在用户拷贝元素内容时触发     
oncut    该事件在用户剪切元素内容时触发     
onpaste    该事件在用户粘贴元素内容时触发     
（5）拖动事件
ondrag    该事件在元素正在拖动时触发     
ondragend    该事件在用户完成元素的拖动时触发     
ondragenter    该事件在拖动的元素进入放置目标时触发     
ondragleave    该事件在拖动元素离开放置目标时触发     
ondragover    该事件在拖动元素在放置目标上时触发     
ondragstart    该事件在用户开始拖动元素时触发     
ondrop    该事件在拖动元素放置在目标区域时触发