click 事件是指元素在被點擊時觸發(fā)的事件表谊，其有幾種使用方式刮刑；
1喉祭、在 html 元素中添加
<button onclick="fn()">click</button>
onclick 后的引號內(nèi)放要執(zhí)行的 js 代碼；
當按鈕被點擊的時候雷绢，會執(zhí)行引號內(nèi)的代碼（即觸發(fā) fn 函數(shù)的執(zhí)行）臂拓；
此時 fn 是掛載在全局作用域下的；
2习寸、在 js 中直接對 element 添加
與直接在元素中添加不同胶惰，此處綁定的是事件處理函數(shù)，不可加 () 執(zhí)行霞溪；
如果加了 ()孵滞，函數(shù)將在加載 js 的時候直接執(zhí)行一次，點擊函數(shù)綁定的是函數(shù)執(zhí)行后的 return鸯匹，若無則為 undefined坊饶；
a.直接綁定匿名函數(shù)
<button id="myDiv">click</button>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.onclick = function() {
console.log(this);
}
</script>
此時該函數(shù)的掛載對象為該元素對象；
this 輸出為 element殴蓬；
b.綁定已聲明函數(shù)
<button id="myDiv">click</button>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.onclick = showThis;
function showThis() {
console.log(this);
}
</script>
此時該函數(shù)的掛載對象為該元素對象匿级；
this 輸出為 element；
3染厅、在 js 中通過 addEventListener 添加
在 IE 中通過 attachEvent 添加事件痘绎；
a.單個事件
<button id="myDiv">click</button>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', showThis);
function showThis() {
console.log(this);
}
</script>
函數(shù)掛載對象為當前元素；
this 輸出為 element肖粮；
b. 多個事件
若像第2點孤页，直接綁定事件，定義多次 onclick涩馆，每次定義都會把前面的事件覆蓋掉行施，只執(zhí)行最后一次允坚；
<button id="myDiv">click</button>
<script>
var myDiv = document.getElementById('myDiv');
addEvent(myDiv, 'click', show1);
addEvent(myDiv, 'click', show2);
addEvent(myDiv, 'click', show3);
// 主流瀏覽器輸出順序為 first,second,third；IE8 及以下輸出順序為 third,second,first蛾号；
function show1() { console.log('first'); }
function show2() { console.log('second'); }
function show3() { console.log('third'); }
function addEvent(elm, event, fn, useCapture) {
useCapture = useCapture || false;
elm.addEventListener ?
elm.addEventListener(event, fn, useCapture) : //主流瀏覽器都支持稠项，
(function() {
var newEvent = 'on' + event;
return elm.attachEvent(newEvent, fn, useCapture); // IE8 及以下支持
})();
}
</script>
