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);
}

转载于:https://www.cnblogs.com/smallfishzzy/p/7923329.html