包含js里addeventlistener的词条
js添加事件和移除事件:addEventListener()与removeEventListener()
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注：事件名不含"on",如“click”) 现在的版本可以省略第三个参数，默认值为false
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除
这个例子中，使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同
重写后的这个例子在addEventListener()和removeEventListener()中用的是相同的函数。
1：相同事件绑定和解除，需要使用共用函数；绑定和解除事件时 事件没有"on" 即onclick写成click
2：共用函数不能带参数；
布尔值参数是true，表示在捕获阶段调用事件处理程序；就是最不具体的节点先接收事件，最具体的节点最后接收事件
javascript 用addEventListener监听时，如何向触发的函数传递函数？
你还是把具体需求描述一下，感觉你这个思路考虑得不对。
事件监听只能获取到触发事件的元素，可以在这个元素上放些数据，当然也可以把函数名放进去再eval，或者把函数名挂到一个对象上，用对对象方法访问(不用eval)
下面是示例
!DOCTYPE?html
html
head
titlejs测试/title
/head
body
script?type="text/javascript"
function?test1(src){
alert(src+':这里调用到了test1');
}
function?test2(src){
alert(src+':这里调用到了test2');
}
function?eventHandler(e){
var?func=this.getAttribute("data-func");
//eval方法
eval(func+"('eval中调用')");
//属性方法，全局函数是挂在window下的
window[func]("按window方法调用");
}
window.onload=function(){
//没有用addEventListener，因为还要考虑到旧版IE的兼容，只用了onclick
//实际中最好考虑用库(jQuery等)更方便绑定
document.getElementById('btn1').onclick=eventHandler;
document.getElementById('btn2').onclick=eventHandler;
}
/script
p下面这两个在js中动态绑定，而且绑定的是同一个函数/p
a?href="javascript:"?id="btn1"?data-func="test1"按钮一/a
a?href="javascript:"?id="btn2"?data-func="test2"按钮二/a
p下面这两个用内联事件，实际上两个绑定生成了不同的函数/p
a?href="javascript:"?onclick="test1('内联三')"按钮三/a
a?href="javascript:"?onclick="test2('内联四')"按钮四/a
/body
/html
js 判断是否存有事件 addeventlistener
原生实现无法判断是否有事件。如果确实需要请参照以下代码，另外本代码只使用于调用dom2形式加载或者移除事件功能，对应dom0类型的没有做测试。
以下代码修改了原生的Element对象，是否需要这样做，请自己酌情处理。
!DOCTYPE?html
html
head?lang="en"
????meta?charset="UTF-8"
????title/title
????script?type="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]){
????????????????????var?arr?=?this.eventListenerList[a];
????????????????????for(var?i?=0;iarr.length;i++){
????????????????????????if(arr[i].toString()?===?b.toString()){
????????????????????????????this.eventListenerList[a].splice(i,1);
????????????????????????}
????????????????????}
????????????????}
????????????}
????????})();
????????//此后为测试代码。
????????window.onload?=?function(){
????????????var?dom?=?document.getElementById("test");
????????????//增加三个监听
????????????dom.addEventListener("click",function(){
????????????????console.info("click?function");
????????????},false);
????????????dom.addEventListener("click",function(){
????????????????console.info("click?function2");
????????????},false);
????????????dom.addEventListener("click",function(){
????????????????console.info("click?function3");
????????????},false);
?
????????????console.log(dom.eventListenerList["click"].length);
????????????//读出监听的方法
????????????var?clicks?=?dom.eventListenerList.click;
????????????if(clicks)?clicks.forEach(function(f)?{
????????????????console.log("I?listen?to?this?function:?"+f.toString());
????????????});
????????????//删除监听
????????????dom.removeEventListener("click",function(){
????????????????console.info("click?function");
????????????},false);
?????????????
????????????console.log(dom.eventListenerList["click"].length);
????????};
????/script
/head
body
????button?id="test"?测试/button
/body
/html
js有关addEventListener的问题
直接onclick 这个事件会被覆盖。
addEventListener 这个是事件绑定，事件内容不会被覆盖。
button.onclick = function(){alert(1)};
button.onclick = function(){alert(2)};
button.addEventListener("click",function(){alert("xx"),false});
button.addEventListener("click",function(){alert("yy"),false});
执行一下，就知道结果了。