1.1事件
事件：是可以被js检测到的行为，实质上是一种交互操作。 例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发 某个函数。
事件的作用： (1)各个元素之间可以借助事件来进行交互 (2)用户和页面之间也可以通过事件来交互 (3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）
ps：注意：事件通常与函数配合使用，当事件发生时函数才会执行。
1.2事件传递
事件传递方式主要分两种：事件冒泡、事件捕获
ps：如没有特殊情况，均采用事件冒泡。
2.非IE浏览器中的【事件绑定】
2.1 HTML事件
绑定操作发生在HTML代码中的事件，称为HTML事件。
语法：on+事件=‘函数();函数();函数();……‘
例如：
在上述HTML代码中，分别给d1和d2绑定了效果不同的HTML事件。
ps：HTML事件采用冒泡机制来处理事件。即 点击d2时会先执行d2的绑定事件（即执行test2函数）。 然后采用事件冒泡将事件传递给上一级DOM节点d1，然后d1执行自己的绑定事件。
pss：函数执行的顺序按照绑定事件时函数的顺序为准
HTML事件的移除方式： 元素.setAttribute('on+事件名'，null); eg:d1.setAttribute('onclick',null);
HTML事件缺陷：耦合性太强了，修改一处另一处也要修改。 当函数没有加载成功时，用户去触发事件，则会报错。
2.2 DOM0级事件
在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。
语法：元素.on+事件名 = function(){需要执行的语句;}
例如： btn.onclick = function () {console.log(‘按钮被点击’);};
ps：以冒泡机制来处理事件，不存在兼容的问题
DOM0级事件的移除方式： 元素. on+事件名=null; eg:btn.οnclick=null;
DOM0级事件缺陷： 一次只能绑定一个触发函数。如果同时绑定多个触发函数，则以最后一个为准。
点击按钮触发函数是最后一个，输出66666。
2.3 DOM2级事件
在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。
语法：元素.addEventListener(type,listener,useCapture)
type:事件类型。【没有on！没有on！没有on！】 listener:监听函数，绑定的函数 useCapture:是否使用捕获机制。如果不写，默认值为false false:冒泡机制 true：捕获机制 注意:DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。
例如：
上述代码表示给btn节点添加了两个dom2级点击事件。事件传递采用事件捕获方式传递。
DOM2级事件的移除方式：
node.removeEventListener(type,外部函数名,useCapture)
eg：btn.removeEventListener('click',test,true);
ps：DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。 //绑定匿名函数
pss：第三个参数默认可以不写，默认是false。但是如果删除的是捕获事件，则必须写为true 才可以。
3.IE浏览器中的【事件绑定】
(1)HTML事件处理程序：等同于非IE
(2)DOM0级事件：等同于非IE
(3)DOM2级事件： 在js脚本中，通过attachEvent函数绑定事件
语法：元素.attachEvent(type,listener)
type:事件类型。【有on！有on！有on！】 listener:监听函数，绑定的函数 注意:如果绑定多个函数，按照函数书写的倒叙执行。
例如：上述代码表示给btn节点添加了两个dom2级点击事件。先执行222，再执行111。
IE下DOM2级事件的移除方式： 元素.detachEvent(type,listener)
eg:
ps：匿名函数无法被移除。
4.解决浏览器中关于【事件绑定】兼容性问题
由于【IE浏览器中的事件绑定】和【非IE浏览器中的事件绑定】方式方法都有所不同。所以 单一的某种函数都不能完美解决不同浏览器下的方法绑定问题。 那么我们又应该如何面对在不同浏览器下【事件绑定】这个问题的解决方案呢？
以下为解决方案的思路。
绑定事件时： 如果能使用addEventListener方法绑定的，就采用本方法 否则采用attachEvent方法绑定
解绑事件时： 如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑 否则采用detachEvent方法解绑
5.鼠标事件
(1)鼠标事件类型
(2)鼠标事件原则 js鼠标事件是指通过鼠标一系列操作（如进入，点击等）来触发的事件。
(1)鼠标事件类型
鼠标单击是触发：click
鼠标双击是触发：dblclick
鼠标按下时触发：mousedown
鼠标抬起时触发：mouseup
鼠标移动时触发：mousemove
鼠标移入时触发(不冒泡)： mouseenter
鼠标移出时触发(不冒泡)： mouseleave
鼠标移入时触发(冒泡)： mouseover
鼠标移出时触发(冒泡)： mouseout
语法：元素.on+鼠标事件名称 = 调用函数
例如：d1.ondblclick = function () { console.log('这是d1');};
(2)鼠标事件原则
a.鼠标的基本事件默认采用冒泡传递
b.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响
c.mouseenter和mouseleave两个事件不冒泡触发。
6.文档事件
文档事件中主要是指添加给整个文档的事件。在这一类事件中，绝大部分并不需要用户主 动去进行调用。而是通过文档的不同状态来进行自动执行
(1)加载成功\失败事件：load\error
(2)当DOM加载完成时触发事件：DOMContentLoaded
(3)页面(文档)发生卸载时触发的事件：beforeunload
(4)文档加载状态判断事件：readystatechange
(5)文档大小发生改变时的回调事件：resize
(1)加载成功\失败事件：load\error
load事件指的是：节点加载成功时自动发生回调事件
error事件值得是：节点加载失败时自动发生的回调事件
语法： node.onload = func(){};
例如： 在head中为页面元素添加点击事件，通过文档的onload事件解决了 【因网页加载未完成，而导致的获取页面元素失败】的问题
window.onload = function () {
var div = document.querySelector(‘div’); div.onclick = function () {console.log('点击事件');}; }
(2)当DOM加载完成时触发事件：DOMContentLoaded
DOMContentLoaded事件和load事件的区别是触发的时机不一样，先触发 DOMContentLoaded事件，后触发load事件。
因此样式文件的加载会阻塞脚本的执行。 所以如果你把一个内部脚本<script>元素放在了一个<link>后面，如果页面没有完成解析 则脚本不会触发，直到样式文件加载完成之后.(这种情况被称为文件阻塞)
(3)页面(文档)发生卸载时触发的事件：beforeunload
页面卸载时触发这个事件（页面刷新和关闭页面），通常情况下配合event.returnValue使 用。 一般情况下都是直接添加到body上面。而如果没有在body上添加本事件，则需要在 window上面添加。
值得注意的是，beforeunload事件中弹出的对话框一般情况下是不允许用户做出修改的。 只能采用默认的对话框。并且在beforeunload所关联的回调函数中也是不支持alert弹出框的
(4)文档加载状态判断事件：readystatechange
当document的readyState改变时触发这个事件(仅第二阶段)。
众所周知，document节点中拥有一个属性叫做readyState。其拥有三个可能值：
loading：加载DOM中
interactive：加载外部资源
complete：加载完成
而readystatechange事件正是在这个状态发生改变时调用的事件。
调用方式可以用DOM0也可以用DOM2来绑定。
(5)文档大小发生改变时的回调事件：resize
但是美中不足的是，js中为了追求变化的敏感度。将resize事件的响应事件设置为了0。 也就是说每一次的文档大小改变都会立即调调用本事件。 这就造成了【一次变化】却发生了【不止一次】的resize事件调用。
所以为了解决这个问题，我们可以采用一种延迟的写法来实现。