addeventlistener，addeventlistener是什么意思
亲爱的读者们，你是否对addeventlistener和addeventlistener是什么意思的相关问题感到困惑？别担心，今天我将为你解答这些问题，让你对此有更清晰的认识。
js 判断是否存有事件 addeventlistener
原生实现无法判断是否有事件。如果确实需要请参照以下代码，另外本代码只使用于调用dom2形式加载或者移除事件功能，对应dom0类型的没有做测试。
以下代码修改了原生的Element对象，是否需要这样做，请自己酌情处理。
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scripttype="text/javascript">
/**
*此处代码必须放到任何javascript代码之前。另外增加事件只能用addEventListener形式。
*/
(function(){
Element.prototype.eventListenerList={};
Element.prototype._addEventListener=Element.prototype.addEventListener;
Element.prototype._removeEventListener=Element.prototype.removeEventListener;
Element.prototype.addEventListener=function(a,b,c){
this._addEventListener(a,b,c);
if(!this.eventListenerList[a])this.eventListenerList[a]=[];
this.eventListenerList[a].push(b);
};
Element.prototype.removeEventListener=function(a,b,c){
this._removeEventListener(a,b,c);
if(this.eventListenerList[a]){
vararr=this.eventListenerList[a];
for(vari=0;i<arr.length;i++){
if(arr[i].toString()===b.toString()){
this.eventListenerList[a].splice(i,1);
}
}
}
}
})();
//此后为测试代码。
window.onload=function(){
vardom=document.getElementById("test");
//增加三个监听
dom.addEventListener("click",function(){
console.info("clickfunction");
},false);
dom.addEventListener("click",function(){
console.info("clickfunction2");
},false);
dom.addEventListener("click",function(){
console.info("clickfunction3");
},false);
console.log(dom.eventListenerList["click"].length);
//读出监听的方法
varclicks=dom.eventListenerList.click;
if(clicks)clicks.forEach(function(f){
console.log("Ilistentothisfunction:"+f.toString());
});
//删除监听
dom.removeEventListener("click",function(){
console.info("clickfunction");
},false);
console.log(dom.eventListenerList["click"].length);
};
</script>
</head>
<body>
<buttonid="test">测试</button>
</body>
</html>
window.addeventlistener怎么用
(要注意的是div必须放到js前面才行)
一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如：
复制代码代码如下:
document.getElementById("btn").onclick= method1;
document.getElementById("btn").onclick= method2;
document.getElementById("btn").onclick= method3;
那么将只有method3生效。
如果是Mozilla系列，用addEventListener可以让多个事件按顺序都实现，比如：
复制代码代码如下:
var btn1Obj= document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
如果是ie系列，用attachEvent可以让多个事件按顺序都实现，比如：
复制代码代码如下:
var btn1Obj= document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
=======================================================
Mozilla中：
addEventListener的使用方式
target.addEventListener(type,listener,useCapture);
target：文档节点、document、window或 XMLHttpRequest。
type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener：实现了 EventListener接口或者是 JavaScript中的函数。
useCapture：是否使用捕捉，一般用 false。例如：document.getElementById("testText").addEventListener("keydown", function(event){ alert(event.keyCode);}, false);
IE中：
target.attachEvent(type, listener);
target：文档节点、document、window或 XMLHttpRequest。
type：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener：实现了 EventListener接口或者是 JavaScript中的函数。例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
W3C及 IE同时支持移除指定的事件,用途是移除设定的事件,格式分别如下:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
DOM2的进化:
DOM 0 Event DOM 2 Event
onblur() blur
onfocus() focus
onchange() change
onmouseover() mouseover
onmouseout() mouseout
onmousemove() mousemove
onmousedown() mousedown
onmouseup() mouseup
onclick() click
ondblclick() dblclick
onkeydown() keydown
onkeyup() keyup
onkeypress() keypress
onsubmit() submit
onload() load
onunload() unload
新的DOM2用法可以addEventListener()这个函数来观察到:
复制代码代码如下:
addEventListener(event,function,capture/bubble);
参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行,再执行事件,而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler,是 attachEvent(),格式如下:
复制代码代码如下:
window.attachEvent(”submit”,myFunction());
比较特别的是attachEvent不需要指定capture/bubble的参数,因为在windows IE环境下都是使用Bubble的模式.
如何判断是否支持哪种监听呢？如：
复制代码代码如下:
if(typeof window.addEventListener!=“undefined”){
window.addEventListener(”load”,rollover,false);
} else{
window.attachEvent(”onload”,rollover)
}
上述的 typeof window.addEventListener!=“undefined”程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型,如果不支持就使用attachEvent.
W3C及 IE同时支持移除指定的事件,用途是移除设定的事件,格式分别如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
addeventlistener是什么意思
addEventListener是一个侦听事件并处理相应的函数。
参数
1、type:String
事件的类型。
2、listener:Function
侦听到事件后处理事件的函数。此函数必须接受 Event对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示：访问修饰符function
函数名(evt:Event):void
3、useCapture:Boolean(default= false)
这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。
如果将 useCapture设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture为
false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture设置为
true，第二次再将useCapture设置为 false。
4、priority:int(default= 0)
事件侦听器的优先级。优先级由一个带符号的 32位整数指定。数字越大，优先级越高。优先级为 n的所有侦听器会在优先级为 n-1
的侦听器之前得到处理。如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。默认优先级为 0。
5、useWeakReference:Boolean(default= false)
确定对侦听器的引用是强引用，还是弱引用。强引用(默认值)可防止您的侦听器被当作垃圾回收。弱引用则没有此作用。
文章分享到这里，希望我们关于addeventlistener的内容能够给您带来一些新的认识和思考。如果您还有其他问题，欢迎继续探索我们的网站或者与我们交流，我们将尽力为您提供满意的答案。