事件对象属性

什么是事件对象属性？

事件就是浏览器网页中的操作行为
事件对象：浏览器网页中发生的操作行为，代码中也可以通过对象的形式展示出来，通过提供的事件对象可以跟那个号的处理发生的行为

事件对象的常见属性

 事件的捕捉和冒泡

事件的发生过程

语法环境中，用户执行了某个行为，浏览器获取到用户的操作，将用户的操作行为（事件）传到给网页文档，网页文档中逐级将事件传递下去，知道交给用户操作的目标标签对象，目标标签对象上的事件出发了，整个过程称为事件的捕获机制；事件触发之后，默认情况下会逐级向上层触发相同事件，逐级触发事件的过程称为事件的冒泡触发机制

事件冒泡触发： 

<div>
    <p>
        <button>点击</button>
    </p>
</div> 

var div = document.querySelector('div')
var p = document.querySelector('p')
var btn = document.querySelector('button')
div.onclick = function() {
    alert('div')
}
p.onclick = function() {
    alert('p')
}
btn.onclick = function() {
    alert('button')
}
//执行过程 button -> p-> div 

 事件捕获机制：

div.addEventListener('click',function() {
    alert('div')
},true)
p.addEventListener('click',function() {
    alert('p')
},true)
button.addEventListener('click',function() {
    alert('button')
},true)
//执行过程 -> div -> p-> button

大部分情况下，用户通过鼠标或者键盘，都是期望直接操作目标元素，事件的冒泡触发机制对于正常网页特效具有一定的泡坏行，所以大部分事件中都需要阻止事件冒泡 

div.onclick = function() {
    alert('div')
}
p.onclick = function() {
    alert('p')
}
btn.onclick = function(e) {
    var event = window.event || e
    if(event.stopPropagation) {
        event.stopPropagation()
    }else {
        event.cancelBubble = true
    }
    alert('button')
}