javascript将函数传递给onclick事件

Question

我必须编写一个函数来创建 a 标记的 HTML 代码，并且此函数还将函数处理程序传递给创建的 a 的 onclick 事件 标签。 代码:

function a(text,functionHandler){
    return '<a href="#" onclick="'+functionHandler+'">'+text+'</a>';
}

//usage
var a1 = a('link',function(){
   alert('test');
});

将函数传递给字符串不起作用。 所以我的问题是:如何将函数句柄传递给 onclick 事件并获取创建标签的 HTML 代码？

Answer 1

您当前的方法有几个问题 -

1. function 是关键字。您不能将其用作参数。
2. 根据您的使用方式，您需要在此处提供函数名称。传递回调无济于事。

与其将 anchor 作为字符串返回，不如将其作为元素返回 -

function createAnchor(text, clickHandler) {
    var link = document.createElement('a');    // creates an anchor element
    link.href = "#";                           // sets the href
    link.onclick = clickHandler;               // sets the click handler
    link.innerHTML = text;                     // assigns the inner html string

    return link;                               // now return it
}

然后-

var myAnchor = createAnchor('link', function () {
    alert('test');
});

// Add this element wherever you want

请参阅关于 createElement 的文档 和 element .

编辑

如果要将此 anchor 元素作为子元素添加到现有 DOM 元素，请使用 appendChild -

var myAnchor = createAnchor('link', function () {
    alert('test');
});

document.getElementById('x').appendChild(myAnchor);

Live JSFiddle .

编辑 2

如果你真的想要你的 anchor 字符串，然后使用上面的函数创建 anchor 元素，将它作为子元素附加到你想要的元素，然后在父元素上使用 innerHTML。该方法在此处演示 -

function createAnchorString(parentId, text, clickHandler) {
    var link,
        parent;

    link = createAnchor(text, clickHandler);    // call the previous function
    parent = document.getElementById(parentId);
    parent.appendChild(link);

    return parent.innerHTML;
}

var myAnchorString = createAnchorString('x', 'link', function () {
    alert('test');
});

alert(myAnchorString);

Live Fiddle .