addEventListener的三種用法

首先addEventListener得API

target.addEventListener(type, listener[, options]);

target.addEventListener(type, listener [,{capture: Boolean, bubbling: Boolean, once: Boolean}]);

target.addEventListener(type, listener[, useCapture]);


type表示監聽事件類型的字符串。listener當所監聽的事件類型觸發時，會接收到一個事件通知（實現了 Event 接口的對象）對象。listener 必須是一個實現了 EventListener 接口的對象，或者是一個函數options 可選一個指定有關 listener 屬性的可選參數對象。可用的選項如下：

• capture:  Boolean，表示 listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時觸發。
• once:  Boolean，表示 listener 在添加之后最多只調用一次。如果是 true， listener 會在其被調用之后自動移除。
• passive: Boolean，表示 listener 永遠不會調用 preventDefault()。如果 listener 仍然調用了這個函數，客戶端將會忽略它並拋出一個控制台警告。
•  mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，這是個 Boolean，表示 listener 被添加到 system group。

useCapture  可選Boolean，是指在DOM樹中，注冊了該listener的元素，是否會先於它下方的任何事件目標，接收到該事件。沿着DOM樹向上冒泡的事件不會觸發被指定為use capture（也就是設為true）的listener。當一個元素嵌套了另一個元素，兩個元素都對同一個事件注冊了一個處理函數時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。進一步的解釋可以查看 事件流 及 JavaScript Event order 文檔。 如果沒有指定， useCapture 默認為 false 。

第一種最普遍的用法
dom.addEventListener(type,function(){
...
},false)
綁定在dom的事件觸發回調函數，可以觸發函數的內部的邏輯

第二種用法，這種用法和this息息相關，當我們想在構造函數里面使用這個方法  注意在作用域
function Student(dom){
　　this.name = '123';
　　this.onclick1 = function (){
　　　　alert(this.name);
　　}
　　this.onclick2 = function (){
　　　　alert(this.name);
　　}
　　dom.addEventListener('click',this.onclick1,false);
　　dom.addEventListener('click',this.onclick1.bind(this),false);
}
var s = new Student(document.querySelector(...))

第三種，這種方法不常見

var a = document.querySelector('.a');

function Student(el) {
　　el.addEventListener('click', this, false);
}
Student.prototype.handleEvent = function(e) {
　　switch (e.type) {
　　　　case 'click':
　　　　　aa();
　　　　break;
　　　　default:
　　　　break;
　　}
};
var b = new Student(a);

function aa() {
alert(1);
}