通过DOM元素数据集向js传递回调
通过DOM元素数据集向js传递回调
提问于 2019-04-02 08:32:57
我有一个模块化的系统，它从我的服务器获取一些数据，并通过ajax将其返回给客户端，然后客户端对这些数据进行处理。
为了保持代码的模块化，我想引入一个回调变量，这样我就可以指定一个回调函数，该函数根据所请求的数据而变化。最好将其插入到与该功能相关的元素(即按钮或输入)中
现在，我将回调函数名存储在dom中，作为元素的data-callback="functionName"属性，然后对该值进行eval()以运行回调。
代码片段：
document.addEventListener( 'click', function( evt ){
var tgt = evt.target;
if( tgt.id == "btn" ){
var callback = tgt.dataset.callback;
var callbackParam = tgt.dataset.callbackParam;
eval( callback + "('" + callbackParam + "')" );
}
});
function foo( str ){
document.getElementById( "returnDisplay" ).innerText = str;
window.setTimeout( function(){
document.getElementById( "returnDisplay" ).innerText = '';
}, 1000 );
}<div id=returnDisplay></div>
<button id=btn data-callback="foo" data-callback-param="bar">Click me</button>
我知道eval被认为是危险的，有没有其他方法可以通过DOM将回调传递到javascript中？
回答 2
Stack Overflow用户
发布于 2019-04-02 08:47:48
您可以使用setTimeout实现所需的功能。
var callback = tgt.dataset.callback;
setTimeout(callback);如果您需要传递一些参数，您可以，请参见示例
let fncName = 'alert'
let fncParam = 'hello'
setTimeout(`${fncName}("${fncParam}")`)Stack Overflow用户
发布于 2019-04-02 08:50:16
您也可以这样做--我在创建时引用了these MDN docs：
<div id=returnDisplay></div>
<button id="btn" data-callback-param="bar" data-callback-function="myFunc">Click me</button>const log = document.getElementById('btn');
log.onclick = clickHandler;
function clickHandler(e) {
const {callbackParam, callbackFunction} = e.target.dataset
eval(`${callbackFunction}("${callbackParam}")`)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55465338
复制相关文章
相似问题