首页互联网addeventlistener三个参数 addlistener

addeventlistener三个参数 addlistener

编程之家 2024-06-13 221次浏览

一、addEventListener和attachEvent以及element.onclick的区别

attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on",

addeventlistener三个参数 addlistener

可以添加多个事件处理程序,按照添加顺序相反的顺序触发;

addEventListener是给非ie添加事件处理程序,接收三个参数,第一个是事件名,不需要加“on”,

第二个是绑定的函数,第三个参数是一个布尔值,是事件的方式,意思是是否使用useCatch方式,

如果是false,就使用传统的冒泡方式,如果为true,就在捕获阶段调用事件处理程序。

addEventListener可以添加多个事件处理程序,按照添加顺序触发

addeventlistener三个参数 addlistener

二者有个本质上的区别,attachEvent的事件处理程序会在全局作用域中运行,this等于window对象,

而addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行的,this等于绑定元素对象。

既然他们的this指向不同,那怎么才能实现相同的this指向呢?

如果想要实现this关键字指向相同的话,要用Function的apply或者call方法。示例代码如下:

addeventlistener三个参数 addlistener

functionbind(el,fn,type){var_fn=function(){fn.apply(el,arguments);};window.addEventListener?el.addEventListener(type,_fn,false):el.attachEvent("on"+type,_fn);}

即用el来代替_fn里的this。

el.onclick和addEventListener和attachEvent有什么区别呢?本质的区别是el.onclick相当于在标签上写onclick,用addEventListener和attachEvent是通过DOM接口去绑定事件。

一个html文档的解析是有顺序的,先解析标签项,再解析DOM项,el.onclick事实上相当于写在标签上,

通过标签的onclick属性输入到文档,然后由文档解析成事件的。而后者,要在文档解析完成以后,

通过文档的dom接口去绑定的事件,虽然结果是一样的,都是click事件,但是过程是不同的。

通过这三种方式绑定的事件,怎么取消呢?

el.onclick:el.onclick=null;这样就可以取消绑定在el上的事件处理程序了。

通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除,并且移除时传入的参数与添加

处理程序时使用的参数相同。通过addEventListener()添加的匿名函数将无法移除。

通过attachEvent()添加的事件处理程序要通过detachEvent()来移除,其他的情况和addEventListener()一样。

如果都想在事件函数里面获取event对象,怎么获取呢?

这要分浏览器,IE和非IE的事件对象不同。兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论指定事件

处理程序时使用什么方法,都会传入event对象。

el.onclick=function(event){

alert(event.type);//"click"

};

el.addEventListener("click",function(event){

alert(el.type);//"click"

},false);

通过HTML标签属性指定的事件处理程序时,变量event中保存着event对象。

<inputtype="button"value="Clickme"onclick="alert(event.type)"/>//"click"

在IE中,要访问event对象有几种不同的方式:

通过el.onclick绑定的事件处理程序中,event对象作为window对象的一个属性存在。

el.onclick=function(){

varevent=window.event;

alert(event.type);//"click"

}

如果通过attachEvent()添加事件处理程序时,event对象作为参数被传入事件处理程序,

el.attachEvent("onclick",function(event){

alert(event.type);//"click"

});

通过HTML标签属性指定的事件处理程序时,变量event中保存着event对象。这点和非IE一样。

综上,跨浏览器的事件对象获取方法是:returnevent?event:window.event;

二、JavaScript中function定义函数的几种方法

1.最基本的作为一个本本分分的函数声明使用。复制代码代码如下:

functionfunc(){}或varfunc=function(){};

2.作为一个类构造器使用:复制代码代码如下:

functionclass(){}

class.prototype={};

varitem=newclass();

3.作为闭包使用:复制代码代码如下:

(function(){

//独立作用域

})();

4.可以作为选择器使用:复制代码代码如下:

varaddEvent=newfunction(){

if(!-[1,])returnfunction(elem,type,func){attachEvent(elem,'on'+type,func);};

elsereturnfunction(elem,type,func){addEventListener(elem,type,func,false);}

};//避免了重复判断

5.以上四中情况的混合应用:复制代码代码如下:

varclass=newfunction(){

varprivateArg;//静态私有变量

functionprivateMethod=function(){};//静态私有方法

returnfunction(){/*真正的构造器*

licenses(license形容词形式) drivers是什么文件(drivers是什么文件)