javascript - 在 Javascript 中 - 为调用具有给定参数的函数的按钮设置 onclick 属性

Question

我正在用 Javascript 制作纸牌游戏，网页所做的一件事就是创建带有纸牌名称的按钮，单击该按钮即可使用该纸牌。至少在理论上是这样。

代码:

function addButton(card) {
    var newbutton = document.createElement("input");

    newbutton.setAttribute("type", button);
    newbutton.setAttribute("id", 'someButton');
    newbutton.setAttribute("value",card.displayName);
    newbutton.setAttribute("name",card.name);
    newbutton.setAttribute("onclick",'useCard(name)'); ///this is what's not working

我想要的是 onclick 属性使用命名卡(卡的名称是 card.name，可能与其显示的名称不同)。相反，它使用 useCard 并以“name”作为参数，这显然是错误的。这里正确的代码行是什么？

Answer 1

添加事件监听器将是一个更好、更简洁的选择:

newbutton.addEventListener('click', function () {
  useCard(this.getAttribute("name"));
});

如果您确实需要支持 IE < 9，则必须首先检查 addEventListener 兼容性，并在不支持前者的情况下使用 attachEvent:

// generic helper function
function addEventListenerX(elem, evt, listener) {
  if ("addEventListener" in window) {
    elem.addEventListener(evt, listener);
  }
  else {
    elem.attachEvent("on" + evt, listener);
  }
}


addEventListenerX(newbutton, 'click', function () {
  useCard(this.getAttribute("name"));
});

如果您已经在使用 JS 框架(例如 jQuery 或原型(prototype))，请使用他们的监听器系统。他们会自动为您添加兼容性。