将给定函数字符串名称作为参数的Javascript addEventListener
如何将事件侦听器设置为具有字符串变量名而不是函数参数名的控件将给定函数字符串名称作为参数的Javascript addEventListener,javascript,Javascript,如何将事件侦听器设置为具有字符串变量名而不是函数参数名的控件 //working method var elementValue = document.createElement("button"); elementValue.className = "locatorTrainButton"; elementValue.addEventListener('click', myFunctionName_OnClick); //set event from
//working method
var elementValue = document.createElement("button");
elementValue.className = "locatorTrainButton";
elementValue.addEventListener('click', myFunctionName_OnClick);
//set event from variable name
var stringName = "myFunctionName_OnClick";
elementValue.addEventListener('click', *stringName??*);
不能,因为
侦听器必须是对象或函数
从
addEventListener()
的工作原理是将实现EventListener
的函数或对象添加到调用它的EventTarget
上指定事件类型的事件侦听器列表中
以下是语法:
target.addEventListener(类型,侦听器[,选项])代码>
target.addEventListener(类型,listener[,useCapture])
其中,侦听器
是:
当指定类型的事件发生时接收通知的对象(实现事件
接口的对象)。这必须是实现EventListener
接口的对象或JavaScript函数
不能,因为侦听器必须是对象或函数
从
addEventListener()
的工作原理是将实现EventListener
的函数或对象添加到调用它的EventTarget
上指定事件类型的事件侦听器列表中
以下是语法:
target.addEventListener(类型,侦听器[,选项])代码>
target.addEventListener(类型,listener[,useCapture])
其中,侦听器
是:
当指定类型的事件发生时接收通知的对象(实现事件
接口的对象)。这必须是实现EventListener
接口的对象或JavaScript函数
不能将字符串名称用作回调中的函数引用。但是,使用带有eval()
的匿名函数可能会起作用,但不建议这样做
这是因为从技术上讲,您可以使用eval()
按函数名调用函数,然后使用.apply(null,arguments)
使用回调接收的相同参数调用函数
但是,我不推荐这种解决方案,因为eval()
通常不受欢迎,因为它会带来安全风险。是否有使用动态函数名的原因
函数myFunctionName\u单击(e){
console.log('clicked');
//验证事件是否正确传递
console.log(如target);
}
var elementValue=document.createElement(“按钮”);
elementValue.innerText='单击我!';
var stringName=“myFunctionName\u OnClick”;
elementValue.addEventListener('click',function(){
eval(stringName+'.apply(null,参数)');
});
document.body.appendChild(elementValue)代码>不能在回调中使用字符串名称作为函数引用。但是,使用带有eval()
的匿名函数可能会起作用,但不建议这样做
这是因为从技术上讲,您可以使用eval()
按函数名调用函数,然后使用.apply(null,arguments)
使用回调接收的相同参数调用函数
但是,我不推荐这种解决方案,因为eval()
通常不受欢迎,因为它会带来安全风险。是否有使用动态函数名的原因
函数myFunctionName\u单击(e){
console.log('clicked');
//验证事件是否正确传递
console.log(如target);
}
var elementValue=document.createElement(“按钮”);
elementValue.innerText='单击我!';
var stringName=“myFunctionName\u OnClick”;
elementValue.addEventListener('click',function(){
eval(stringName+'.apply(null,参数)');
});
document.body.appendChild(elementValue)代码>只要您的函数是在顶层定义的,您就可以执行以下操作:
功能测试(){
console.log('worked');
}
addEventListener('click',window['test'])代码>
只需单击窗口代码>只要您的函数是在顶层定义的,您就可以执行以下操作:
功能测试(){
console.log('worked');
}
addEventListener('click',window['test'])代码>
只需单击窗口代码>它必须是一个函数,否则您会得到未捕获的TypeError:无法在“EventTarget”上执行“addEventListener”:参数2不是“Object”类型。
看看:,它可能会告诉您如何使用字符串作为对象键,一个函数作为一个值,然后可以用作第二个参数它必须是一个函数,否则您会得到未捕获的TypeError:无法在“EventTarget”上执行“addEventListener”:参数2不是“Object”类型。
看看:,它可能会让您知道如何使用字符串作为对象键,一个函数作为一个值,你可以用它作为第二个参数,这仍然是listener@dippas是的,不幸的是,情况就是这样。是的,原因是我用一个通用函数动态地定义控件,用于代码优化。因此,不同的控件必须指向不同的事件函数。除了风险之外,eval()也有效。谢天谢地,这仍然是listener@dippas是的,不幸的是,情况就是这样。是的,原因是我用一个通用函数动态地定义控件,用于代码优化。因此,不同的控件必须指向不同的事件函数。除了风险之外,eval()也有效。谢谢你。好的,这必须是一个函数或对象,但是没有一个方法将对象与其名称作为变量关联起来吗?因此,var listener=objectFromStringName(name);elementValue.addEventListener('click',listener);好吧,除非您使用eval
(已回答)否则这是不可能的。在这种情况下,窗口['name']对我有效。谢谢您的详细解释和解决方法谢谢。好吧,那一定是个好主意