//根據看MDN整理，其中，比較重要的點
1）addEventListener()添加事件比較好
2）e.preventDefault();//阻止默認行爲
3）事件冒泡和捕獲
4）事件委託
一、事件介紹
1、使用網頁事件的方式1）事件處理器屬性
2）行內事件處理器 - 請勿使用
3）addEventListener()和removeEventListener()
eg:btn.addEventListener('click', bgChange);//添加事件
優點：1）可以刪除事件2）可以給一個事件添加多個函數
二、其他
1、事件對象
//e.target : btn
function bgChange(e) {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
e.target.style.backgroundColor = rndCol;
console.log(e);
}
btn.addEventListener('click', bgChange);
2、阻止默認行爲
e.preventDefault();//阻止
//比如在submit ,如果判斷以後不成立，則拒絕提交
3）事件冒泡及捕獲
對事件冒泡和捕捉的解釋
當一個事件發生在具有父元素的元素上(例如，在我們的例子中是<video>元素)時，現代瀏覽器運行兩個不同的階段 - 捕獲階段和冒泡階段。
在捕獲階段：//從外到裏
瀏覽器檢查元素的最外層祖先<html>，是否在捕獲階段中註冊了一個onclick事件處理程序，如果是，則運行它。然後，它移動到<html>中的下一個元素，並執行相同的操作，然後是下一個元素，依此類推，直到到達實際點擊的元素。
在冒泡階段，恰恰相反:
瀏覽器檢查實際點擊的元素是否在冒泡階段中註冊了一個onclick事件處理程序，如果是，則運行它
然後它移動到下一個直接的祖先元素，並做同樣的事情，然後是下一個，等等，直到它到達<html>元素。
**在現代瀏覽器中，默認情況下，所有事件處理程序都在冒泡階段進行註冊。(從外到裏處理）
//解決方法
e.stopPropagation();//不會向上擴大
3、事件委託
在JavaScript程序中事件處理的數量直接影響了頁面的整體性能，當時間處理程序過多時，例如：給100個按鈕綁定事件。傳統的做法就是：通過DOM操作獲取每一個按鈕元素分別綁定事件處理函數。
而每一個函數都是一個對象，所以都會佔用內存，內存佔用的越多性能毋庸置疑的會變得越差；而且每次通過DOM訪問到觸發事件的元素也無疑會增加交互時間延緩事件處理速度降低性能。而爲了儘可能減少這種性能的消耗就引入了事件委託這一解決方案。
所謂事件委託就是利用事件冒泡，指定一個事件處理程序，來管理多個事件。即：利用冒泡機制將一類事件觸發儘可能高的委託給其父節點或祖先節點來觸發事件處理函數，這樣只需要定義一個函數，訪問一次DOM對象，減少了內存的佔用以及訪問DOM元素的時間，降低了性能的消耗。
var btns = document.getElementById("btn-warp");
btns.onclick = function(event){
// event.target 事件源
switch (event.target.id) {
case "btn1":
alert("btn1");
break;
case "btn2":
alert("btn2");
break;
case "btn3":
alert("btn3");
break;
}
}
$("#btn-warp").on("click",function(event){
switch (event.target.id) {
case "btn1":
alert("btn1");
break;
case "btn2":
alert("btn2");
break;
case "btn3":
alert("btn3");
break;
}
});