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