js事件分类（鼠标、键盘、文本、其它、特殊事件）、事件的3种绑定方式和对应解除方式、自定义事件、事件冒泡和捕获、事件属性（源事件、鼠标事件属性、按键事件属性）、事件方法。

document上定义的事件（绑定方式dom只能为document），监听document.readyState状态位改变。其中document.readyState有3种状态位：'loading'、'interactive'、'complete'。分别代表document在文档解析中（构建dom树）、文档解析完成（dom树解析完成），页面加载完成。

DOMcontentLoaded

document上定义的事件（绑定方式dom只能为document），只能通过addEventListener方式添加。表示dom树解析完。

其它事件链接

HTML 事件参考手册

事件3种绑定方式（以点击事件为例）

dom.onclick = function(e){}

使用on加事件名，在html中的dom标签上以属性的形式直接写上οnclick=''，''中传入js代码即可。代表点击该dom元素时执行onclick的js代码（句柄的绑定方式）。一个事件只能绑定一个处理函数，绑定多个事件会覆盖。清除事件为dom.οnclick=null/false/''。e为系统传入的点击事件对象（IE中会传到window.event）。

dom.addEventListener('click',function(e){},false)

第一个参数传入事件名，可以给同一个元素的一个事件绑定多个不同的函数。使用removeEventListener清除事件，参数和上面一样，但是只有相同的函数才能清除（即只有传函数名时才能清除事件）。e为系统传入的点击事件对象（IE中会传到window.event），false代表不开启事件捕获。

dom.attachEvent('onclick',function(e){}，false)

第一个参数传入on加事件名，可以给同一个元素一个事件绑定相同的函数（样子相同，非相同引用），this指向window。清除使用detachEvent，参数和上面一样，但是只有相同的函数才能清除（即只有传函数名时才能清除事件）。e为系统传入的点击事件对象（IE中会传到window.event），false代表不开启事件捕获。

方法封装

		function addEvent(elem, type, handle) {
			if (elem.addEventListener) {
				elem.addEventListener(type, handle, false);
			} else if (elem.attachEvent) {
				elem.attachEvent('on' + type, function () {
					handle.call(elem);
				})
			} else {
				elem['on' + type] = handle;
			}
		}

对应事件解绑3种方式（点击事件为例）

dom.οnclick=null

对应解除dom.onclick = function(e){}的绑定方式。

dom.removeEventListener("click",fun,false)

对应解除dom.addEventListener("click",fun,false)的绑定方式。

dom.detachEvent("onclick",fun)

对应解除dom.attachEvent("onclick",fun)的绑定方式。

自定义事件

https://blog.csdn.net/AIWWY/article/details/120982861

事件冒泡和捕获

事件冒泡和捕获，在一个函数上只存在一种，不能同时存在。如果在1个事件上绑定两个函数，执行顺序会先捕获后冒泡，注意自身的执行是按写的先后顺序。

事件冒泡

html上结构嵌套的元素非视觉上，事件触发会从子元素向父元素触发，自身执行不算冒泡，其父元素执行才算冒泡。

事件捕获

与冒泡相反，事件触发会从父元素向子元素触发，自身执行不算冒泡，其子元素执行才算捕获。

无冒泡事件

focus,blur,change,submit,reset,select等事件不冒泡。

阻止默认事件

对于第一种绑定事件的方式，也就是句柄的方式，在函数内使用return false。
使用e.preventDefault()或e.returnValue = false，e为系统传入的点击事件对象，兼容问题e=e||window.event。
使用协议限定符，例如<a href="javascript:void()"></a>

消失事件冒泡和阻止默认事件方法封装

		//取消事件冒泡
		function stopBubble(event) {
			e = e || window.event;
			if (event.stopPropagation) {
				event.stopPropagation();
			} else {
				event.cancelBubble = true;
			}
		}

		//取消默认事件
		function cancelDefault(e) {
			e = e || window.event;
			if (e.preventDefault) {
				event.preventDefault();
			} else {
				event.returnValue = false;
			}
		}