在触发DOM上绑定的事件时，会产生一个事件对象event，这个对象中包含着与事件相关的信息，不同的事件包含的信息也有所不同。
获取事件对象
event对象是事件程序的第一个参数
<div id="box">box</div>
<script>
box.onclick = function(event) {
console.log(event)
}
</script>
属性
不同的事件类型，事件对象包含的信息也有所不同，但有一些属性和方法是共有的
type
type表示被触发的事件类型
<div id="box">box</div>
<script>
box.onclick = function(event) {
console.log(event.type) // 'click'
}
</script>
currentTarget、target和srcElement
currentTarget、target和srcElement都表示事件目标，但它们表示的意义有所不同
currentTarget属性返回绑定该事件的目标节点，它与事件中的this指向相同
target属性返回正在执行当前事件的节点
srcElement属性与target属性功能一致，但是firefox不支持
<ul id="list">
<li>one</li>
<li>two</li>
</ul>
<script>
list.onclick = function(event) {
console.log(event.currentTarget, event.target, event.srcElement)
}
</script>
示例中，由于事件冒泡的原因，点击<li>元素会触发<ul>元素上绑定的click事件，尽管li元素没有绑定click事件。
bubbles
bubbles属性返回一个布尔值，表示当前事件是否会冒泡。对于不会冒泡的事件，比如focus、blur和scroll，bubbles属性会返回false；其他事件都会冒泡，因此返回true。该属性为只读属性
<div id="box">box</div>
<script>
box.onclick = function(event) {
console.log(event.bubbles) // true
}
</script>
cancelBubble
cancelBubble属性用于阻止冒泡，但无法阻止捕获阶段。该值可读写，默认值是false表示允许冒泡。当设置为true时表示阻止冒泡。
注意： 该属性全浏览器支持，但并不是标准写法。标准写法是使用event. stopPropagation()
<div id="box">box</div>
<script>
box.onclick = function(event) {
console.log('box');
event.cancelBubble = true;
}
document.body.onclick = function(event) {
console.log('body');
}
// 'box'
</script>
由于阻止了box元素的事件冒泡，所以只打印了box
eventPhase
eventPhase属性返回一个整数值，表示事件目前所处的事件流阶段。0表示事件没有发生，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
<div id="box">目标阶段</div>
<script>
box.onclick = function(event) {
console.log(event.eventPhase); // 2
}
</script>
<div id="box">捕获阶段</div>
<script>
document.addEventListener('click', function(event) {
console.log(event.eventPhase); // 1
}, true)
</script>
<div id="box">冒泡阶段</div>
<script>
document.addEventListener('click', function(event) {
console.log(event.eventPhase); // 3
}, false)
</script>
cancelable
cancelable属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性。返回true时，表示可以取消。否则，表示不可取消
<div id="box">box</div>
<script>
box.onclick= function(event){
console.log(event.cancelable) // true
}
</script>
defaultPrevented
defaultPrevented属性表示默认行为是否被阻止，返回true时表示被阻止，返回false时，表示未被阻止
常见的默认行为比如点击链接后，浏览器跳转到指定页面；或者按一下空格键，页面向下滚动一段距离
<a id="test" href="https://www.86886.wang" target="_blank">链接</a>
<script>
test.onclick = function() {
console.log(event.defaultPrevented); // false
}
</script>
<a id="test" href="https://www.86886.wang" target="_blank">链接</a>
<script>
test.onclick = function(event) {
event.preventDefault(); // 阻止默认行为
console.log(event.defaultPrevented); // true
}
</script>
方法
stopPropagation()
stopPropagation()方法表示取消事件的进一步捕获或冒泡，无返回值
<div id="box">box</div>
<script>
box.onclick = function(event) {
console.log('box');
event.stopPropagation();
}
document.body.onclick = function(event) {
console.log('body');
}
// 'box'
</script>
stopImmediatePropagation()
stopImmediatePropagation()方法不仅可以取消事件的进一步捕获或冒泡，而且可以阻止同一个事件的其他监听函数被调用，无返回值
<div id="box">box</div>
<script>
box.addEventListener('click', function(event){
console.log('box');
event.stopImmediatePropagation();
})
box.addEventListener('click', function(event){
console.log('box2');
})
document.body.onclick = function(event) {
console.log('body');
}
// 'box'
</script>
如果不调用stopImmediatePropagation()方法，三个事件都会执行
<div id="box">box</div>
<script>
box.addEventListener('click', function(event){
console.log('box');
})
box.addEventListener('click', function(event){
console.log('box2');
})
document.body.onclick = function(event) {
console.log('body');
}
// 'box'
// 'box2'
// 'body'
</script>
preventDefault()
preventDefault()方法取消浏览器对当前事件的默认行为，无返回值
<a id="test" href="https://www.86886.wang" target="_blank">链接</a>
<script>
test.onclick = function(event) {
// 阻止默认行为后，不会打开链接
event.preventDefault();
}
</script>
事件委托
事件委托也叫做事件代理，它指的是利用事件冒泡机制，把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件
利用事件委托，可以提高性能以及降低代码复杂度。下面利用事件委托实现一个小功能，点击当前元素时文字变红
<ul id="list">
<li>one</li>
<li>two</li>
</ul>
<script>
list.onclick = function(event) {
var t = event.target || event.srcElement;
t.style.color = 'red';
}
</script>