通过DOM元素数据集将回调传递给js
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过DOM元素数据集将回调传递给js相关的知识,希望对你有一定的参考价值。
我有一个模块化系统,从我的服务器获取一些数据并通过ajax将它返回给客户端,然后客户端对这些数据进行处理。
为了保持代码模块化,我想引入一个回调变量,所以我可以指定一个根据请求的数据而变化的回调函数。这将优选地插入到与功能相关的元素中(即,按钮或输入)
现在我将回调函数名称存储在dom中,作为元素data-callback="functionName"
属性,然后eval()
ing该值来运行回调。
片段:
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吗?
答案
您可以使用setTimeout实现所需。
var callback = tgt.dataset.callback;
setTimeout(callback);
如果你需要传递一些参数,你可以参见例子
let fncName = 'alert'
let fncParam = 'hello'
setTimeout(`${fncName}("${fncParam}")`)
另一答案
你也可以这样做 - 我在创建时引用了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}")`)
}
以上是关于通过DOM元素数据集将回调传递给js的主要内容,如果未能解决你的问题,请参考以下文章
通过addEventListener给dom添加的事件回调保存在哪里?
对“xxx”类型的已垃圾回收委托进行了回调。这可能会导致应用程序崩溃损坏和数据丢失。向非托管代码传递委托时,托管应用程序必须让这些委托保持活动状态,直到确信不会再次调用它们。 错误解决一例。(代码片段