基本概念：DOM事件的级别
DOM事件模型
DOM事件流
描述DOM事件捕获的具体流程
Event对象的常见应用
自定义事件
1、事件级别
DOM0 element.onclick = function(){} DOM2 element.addEventListener('click', function(){}, false) DOM3 element.addEventListener('keyup', function(){}, false) or other
为什么没有1呢？DOM1设定的时候，没有涉及跟事件相关的改动
2、事件模型
捕获 和 冒泡
3、事件流
说白了就是浏览器，也就是当前页面与用户做交互的过程中，比如我点击了鼠标，左键，这个左键是怎么传到页面上，这就是事件流，他又是怎么响应的，一个完整的事件流分三个阶段
1）捕获 2）目标阶段：事件通过捕获，到达目标元素 3）冒泡
4、描述DOM事件捕获的具体流程
都知道事件捕获是从上到下，那么具体是从哪里开始到呢？其实一开始接收事件的是window,window接收完以后给到document,第三个才是html标签（怎么去表示当前html的节点，document.element）,再就是body，然后再一级一级往下传。与之相当就是冒泡，从当前元素到window的过程
5、Event对象的常见应用
event.preventDefault()：阻止默认事件，比如a标签 event.stopPropagation()：阻止冒泡，比如单击子元素的时候做一件事，父元素的那件事不做，就用这个 event.stopImmediatePropagation()：比如我一个按钮绑定了两个click事件，我想通过优先级的方式，a被点击的时候，不要再执行b，如果在a的里面用这个，b就不会再执行 event.currentTarget：比如事件委托的时候，当前绑定的事件元素 event.target：比如事件委托的时候，区分当前哪个元素被点击
6、自定义事件
var eve = new Event('custome'); ev.addEventListener('custome', function(){ console.log('custome'); }) ev.dispatchEvent(eve);
eg:捕获流程
<!--test.html--> <body> <div id="ev"> 目标元素 </div> <script type="text/javascript"> var ev = document.getElementById('ev'); /** * 第三个参数 设置为true 表示在捕获阶段触发 * 默认是为false 表示在冒泡阶段触发 */ window.addEventListener('click', function(){ console.log('window captrue'); }, true); document.addEventListener('click', function(){ console.log('document captrue'); }, true); // 怎么获取html元素 就是这个documentElement document.documentElement.addEventListener('click', function(){ console.log('html captrue'); }, true); document.body.addEventListener('click', function(){ console.log('body captrue'); }, true); ev.addEventListener('click', function(){ console.log('ev captrue'); }, true); </script> </body>
如图，点击元素的时候，捕获的流程跟我们讲事件流捕获的时候是一样的
eg：自定义事件
<!--test.html---> <body> <div id="ev"> 目标元素 </div> <script type="text/javascript"> var ev = document.getElementById('ev'); var eve = new Event('test'); ev.addEventListener('test', function(){ console.log('test dispatch'); }) ev.dispatchEvent(eve); </script> </body>
刷新页面，自动打印了test dispatch