click 事件是指元素在被點擊時觸發的事件，其有幾種使用方式；
1、在 html 元素中添加
<button onclick="fn()">click</button>
onclick 后的引號內放要執行的 js 代碼；
當按鈕被點擊的時候，會執行引號內的代碼（即觸發 fn 函數的執行）；
此時 fn 是掛載在全局作用域下的；
2、在 js 中直接對 element 添加
與直接在元素中添加不同，此處綁定的是事件處理函數，不可加 () 執行；
如果加了 ()，函數將在加載 js 的時候直接執行一次，點擊函數綁定的是函數執行后的 return，若無則為 undefined；
a.直接綁定匿名函數
<button id="myDiv">click</button>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.onclick = function() {
console.log(this);
}
</script>
此時該函數的掛載對象為該元素對象；
this 輸出為 element；
b.綁定已聲明函數
<button id="myDiv">click</button>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.onclick = showThis;
function showThis() {
console.log(this);
}
</script>
此時該函數的掛載對象為該元素對象；
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>
函數掛載對象為當前元素；
this 輸出為 element；
b. 多個事件
若像第2點，直接綁定事件，定義多次 onclick，每次定義都會把前面的事件覆蓋掉，只執行最后一次；
<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>
