1. DOM事件级别
1.1. DOM0
<button id="btn" type="button"></button> <script> var btn = document.getElementById('btn'); //添加事件 btn.onclick = function() { console.log(this.id)); //这里的this代表DOM对象 } //清理dom0 事件时，只需给该事件赋值为 null input.onclick = null </script>
特点：
- DOM0级事件无法给一个事件添加多个处理函数
1.2. DOM2
var dom = document.getElementById("id"); dom.addEventListener('click', a, false); function a() { alert(this.id);//id // this代表的是dom对象 } //移除事件 //传入的三个参数与添加事件完全相同。 dom.removeEventListener(('click', a, false)).
参数说明：
- 第一个参数是事件名，就是事件属性去掉on，
- 第二个参数是事件处理函数，
- 第三个参数是是否在事件捕获阶段执行。
特点
- 同一个事件处理函数可以绑定2次,一次用于事件捕获，一次用于事件冒泡。
var dom = document.getElementById("outestA"); dom.addEventListener('click', a, false); dom.addEventListener('click', a, true); function a() { alert(this.id);//outestA }
- 如果绑定的是同一个事件处理函数，并且都是事件冒泡类型或者事件捕获类型，那么只能绑定一次，多次绑定仅调用一次。
- 可以绑定多个不同的事件处理函数
旧版本IE浏览器（IE8及一下）
需要使用attachEvent和detachEvent来添加和移除事件,传入两个参数第一个是事件属性（包含on），第二个是处理函数，不支持事件捕获所以没有第三个参数。
var dom = document.getElementById("id"); dom.attachEvent('onclick',a); function a() { alert(this.id);/**/undefined** // 这里的this是window对象 }
1.3. Dom3
DOM3级事件就是在DOM2基础上增加了更多的事件类型
- UI事件，当用户与页面上的元素交互时触发，如：load、scroll
- 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
- 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
- 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
- 文本事件，当在文档中输入文本时触发，如：textInput
- 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
- 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
- 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
注:DOM1标准中并没有定义事件相关的内容*
2. DOM事件模型
- 事件冒泡
- 事件捕获
3. DOM事件流
有以下HTML结构
<html> <body> <div> <span> 我是目标内容 </span> </div> </body> </html>
事件捕获：window -> document -> html -> body -> div -> span -> 目标
事件冒泡：目标 -> span -> div -> body -> html -> document -> window
3.1 冒泡实例：
<div id="parent" class="parent"> <div id="child" class="child"> this is child </div> </div> (function(){ var child = document.getElementById('child'); child.addEventListener('click', function(click){ console.log('child'); } ,flase);//false或者不写，都是冒泡。 var parent = document.getElementById('parent'); parent.addEventListener('click', function(click){ console.log('parent'); } ,false); }());
出现的情况：
- 点击child元素，先打印child后打印parent；
- 点击parent元素，只打印parent。
3.1 捕获实例：
<div id="parent" class="parent"> <div id="child" class="child"> this is child </div> </div> (function(){ var child = document.getElementById('child'); child.addEventListener('click', function(click){ console.log('child'); } ,true); var parent = document.getElementById('parent'); parent.addEventListener('click', function(click){ console.log('parent'); } ,true); }());
出现的情况：
- 点击child元素，先打印parent后打印child。
- 点击parent元素，只打印parent。
注：事件默认的处理阶段为冒泡阶段，可以把addEventListener第三个参数设置为true来让时间在捕获阶段被处理，
4. event对象
事件处理函数会回调一个参数event，代表当前事件对象。
event中常用的方法和属性：
- preventDefault 阻止默认行为，比如当点击submit按钮时候，可以采用此方法阻止表单提交。
- stopPropagation 停止事件冒泡，需要防止事件冒泡带来的负面影响的时候就要使用该方法。
- stopImmediatePropagation 阻止后续事件，该方法除了阻止事件冒泡外在当前事件被绑定多个处理程序的时候，后续的处理程序也会被阻止。
- currentTarget 此属性返回当前事件所绑定的对象。
- target 此属性返回当前触发事件的对象，注意target是触发事件的对象，是真正的事件源，同样以上面的HTML为例，给div绑定一个事件，点击带文字的span后，target是span，而currentTarget是div。
应用：事件冒泡和target属性能做很多事情，比如事件委托
<ul id="click"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
如果想要实现点击每个li标签就能打印出文本内容，我们可以不用给每个li绑定事件，只需要利用事件冒泡即可
var click = document.getElementById('click'); click.addEventListener('click', log, false); function log(e) { console.log(e.target.innerText); }
5. 自定义事件
除了系统内置的事件外，我们还可以自定义事件，由于平时使用的不多可能感觉会很高端，其实自定义事件并不复杂
var myEvent = new Event('myEvent'); document.addEventListener('myEvent', log, false); function log() { console.log('hello event'); } document.dispatchEvent(myEvent);
通过创建Event对象来创建事件，通过dispatchEvent函数派发事件。自定义事件可以绑定到任意DOM元素上，此处选择document只是为了演示方便。
