事件绑定分析

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>