DOM事件的概念
事件是javascript和HTML交互基礎,蕴轨。交互;比如鼠標點擊事件请敦、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分骆捧，不同的DOM事件會有不同的觸發(fā)條件和觸發(fā)效果。
JavaScript 能夠在事件發(fā)生時執(zhí)行术陶，比如當用戶點擊某個 HTML 元素時凑懂。為了在用戶點擊元素時執(zhí)行代碼，請向 HTML 事件屬性添加 JavaScript 代碼：我們可以認為事件是可以被JavaScript偵測到的一種行為梧宫。
DOM事件流
要講DOM事件接谨，首先就要提高事件流的概念。
事件流主要分為冒泡型事件和捕獲型事件塘匣。IE瀏覽器目前只支持冒泡型事件脓豪，而支持標準DOM的瀏覽器比如火狐、Chrome等兩者都支持忌卤。
事件流
addEventListener有三個參數扫夜，第一個參數為事件類型，第二個參數為處理函數，第三個為冒泡事件或捕獲事件笤闯，默認false為冒泡事件堕阔。
<div id='box'></div>
var dom = document.getElementById('box')
// 捕獲的順序
window.addEventListener('click', function () {
console.log("capture window click");
}, false);
document.addEventListener('click', function () {
console.log("capture document click");
}, false);
document.documentElement.addEventListener('click', function () {
console.log("capture html click");
}, false);
document.body.addEventListener('click', function () {
console.log("capture body click");
}, false);
dom.addEventListener("click", function () {
console.log("capture domDiv click");
}, false);
//打印結果
// capture click
// capture body click
// capture html click
// capture document click
// capture window click
Event對象
事件處理方法中的第一個參數返回的就是事件對象。
事件對象可以告訴你這個事件是什么類型的事件颗味，來自哪個元素超陆，事件的位置（如鼠標事件的點擊坐標），以及對事件進行操作比如阻止冒泡浦马。
Event對象的常見應用：
// event.preventDefault() 阻止默認事件
// event.stopPropagation() 阻止冒泡
// event.stoplmmediatePropagation() 響應優(yōu)先級 a的事件加 b將不執(zhí)行
// event.currentTargent 當前綁定事件的對象(父級元素)
// event.target 事件代理當前被點擊的子元素
自定義事件
<div id='box'></div>
var eve = new Event('myEvent');
var dom = document.getElementById('box')
dom.addEventListener('myEvent',function() {
console.log(1)
})
dom.dispatchEvent(eve)时呀；//觸發(fā)
