前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
在触发DOM上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持 event 对象，但有兼容性问题。
获取事件对象
一般地，event 对象是事件程序的第一个参数。IE8及以下浏览器不支持；
另一种方法是直接使用 event 变量，firefox 浏览器不支持；
获取事件对象的常见兼容写法：
<div id="box" style="height:200px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(ev){
ev = ev || event;//获取事件对象的常见兼容写法
box.innerHTML = ev;
}
</script>
事件类型
事件有很多类型，事件对象中的 type 属性表示被触发的事件类型；
<div id="box" style="height:200px;width:200px;background:pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(ev){
ev = ev || event;//获取事件对象的常见兼容写法
box.innerHTML = ev.type;//事件对象中的type属性表示被触发的事件类型
}
</script>
事件目标
关于事件目标，共有 currentTarget、target 和 srcElement 这三个属性；
currentTarget 属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点；IE8及以下浏览器不支持 ;
currentTarget 与事件中的 this 指向相同；
target 属性返回事件的实际目标节点；IE8及以下浏览器不支持；
srcElement 属性与 target 属性功能一致，返回事件的实际目标节点；firefox 浏览器不支持；
<style type="text/css">
#box{height:200px;width:200px;background-color:pink;}
#child{height: 100px;width: 100px;background-color: green;}
</style>
<div id="box">
<div id="child"></div>
</div>
<script>
var oBox = document.getElementById('box');
var oChild = document.getElementById('child');
oBox.onclick = function(ev){
ev = ev || event;
//currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点
console.log(ev.currentTarget);//<div id="box">...</div> //currentTarget与事件中的this指向相同
console.log(ev.currentTarget === this);//true //target属性返回事件的实际目标节点，IE8及以下浏览器不支持
//srcElement 属性与 target 属性功能一致，返回事件的实际目标节点；firefox 浏览器不支持；
//兼容性写法：
var target = ev.target || ev.srcElement;
console.log(target);//<div id="child"></div>
}
</script>
事件代理
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)，也叫事件委托；
事件代理应用事件目标的 target 和 srcElement 属性完成。利用事件代理，可以提高性能及降低代码复杂度；
<style>
#box{background-color: pink;}
.in{height: 30px;}
</style>
<ul id="box">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
<li class="in">4</li>
<li class="in">5</li>
</ul>
<script>
var oBox = document.getElementById('box');
oBox.onmouseover = function(ev){
ev = ev || event;
var target = ev.target || ev.srcElement;
target.style.backgroundColor = 'lightblue';
}
oBox.onmouseout = function(ev){
ev = ev || event;
var target = ev.target || ev.srcElement;
target.style.backgroundColor = 'pink';
}
</script>
事件冒泡
事件冒泡是事件流的第三个阶段，通过事件冒泡可以在这个阶段对事件做出响应；
关于冒泡，事件对象中包含 bubbles、cancelBubble、stopPropagation() 和 stopImmediatePropagation() 这四个相关的属性和方法；
bubbles 属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性。发生在文档元素上的大部分事件都会冒泡，但 focus、blur 和 scroll 事件不会冒泡。所以，除了这三个事件 bubbles 属性返回 false 外，其他事件该属性都为true；
stopPropagation() 方法表示取消事件的进一步捕获或冒泡，但无法阻止同一事件的其他监听函数被调用，无返回值。IE8及以下浏览器不支持；
stopImmediatePropagation() 方法不仅可以取消事件的进一步捕获或冒泡，而且可以阻止同一个事件的其他监听函数被调用，无返回值。IE8及以下浏览器不支持；
<div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(ev){
ev = ev || event;
//bubbles 属性返回一个布尔值，表示当前事件是否会冒泡
console.log(ev.bubbles);//true
}
oBox.addEventListener('click',function(ev){
ev = ev || event;
//stopPropagation() 方法表示取消事件的进一步捕获或冒泡，
ev.stopPropagation();
oBox.innerHTML +='stopPropagation() 方法表示取消事件的进一步捕获或冒泡<br/>';
}) //stopPropagation() 方法表示取消事件的进一步捕获或冒泡，但无法阻止同一事件的其他监听函数被调用
oBox.addEventListener('click',function(ev){
ev = ev || event;
oBox.innerHTML += '但无法阻止同一事件的其他监听函数被调用';
}) document.body.onclick = function(ev){
oBox.innerHTML += '冒泡已被阻止';
}
</script>
cancelBubble 属性只能用于阻止冒泡，无法阻止捕获阶段。该值可读写，默认值是false。当设置为 true 时，cancelBubble 可以取消事件冒泡；该属性全浏览器支持，但并不是标准写法；
<script type="text/javascript">
var handler = function(ev){
ev = ev || event;
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancelBubble = true;
}
}
</script>
事件流
eventPhase 属性返回一个整数值，表示事件目前所处的事件流阶段，IE8及以下浏览器不支持；
0表示事件没有发生，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段；
取消默认行为
关于取消默认行为的属性包括 cancelable、defaultPrevented、preventDefault() 和 returnValue ;
cancelable 属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性。返回true时，表示可以取消。否则，表示不可取消；IE8及以下浏览器不支持；
defaultPrevented 属性表示默认行为是否被阻止，返回 true 时表示被阻止，返回 false 时，表示未被阻止；IE8及以下浏览器不支持；
<div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(ev){
ev = ev || event;
//cancelable 属性返回一个布尔值，表示事件是否可以取消
console.log(ev.cancelable );//true
//defaultPrevented 属性表示默认行为是否被阻止
console.log(ev.defaultPrevented );//false
}
</script>
preventDefault() 方法取消浏览器对当前事件的默认行为，无返回值；IE8及以下浏览器不支持；
<div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(ev){
ev = ev || event;
//cancelable 属性返回一个布尔值，表示事件是否可以取消
console.log(ev.cancelable );//true
//defaultPrevented 属性表示默认行为是否被阻止
console.log(ev.defaultPrevented );//false //preventDefault() 方法取消浏览器对当前事件的默认行为
ev.preventDefault();
//defaultPrevented 属性表示默认行为是否被阻止
console.log(ev.defaultPrevented );//true
}
</script>
returnValue 属性可读写，默认值是true，但将其设置为 false 就可以取消事件的默认行为，与 preventDefault() 方法的作用相同；firefox 和 IE9及以上浏览器不支持；
兼容性写法：
<script type="text/javascript">
var handler = function(e){
ev = ev || event;
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue = false;
}
}
</script>