setAttribute、onClick 和跨浏览器兼容性

Question

我读过很多关于这个问题的帖子，但没有一个有任何可靠的答案。 这是我的代码：

// button creation
onew = document.createElement('input');
onew.setAttribute("type", "button");
onew.setAttribute("value", "hosts");
onew.onclick = function(){fnDisplay_Computers("'" + alines[i] + "'"); }; // ie
onew.setAttribute("onclick", "fnDisplay_Computers('" + alines[i] + "')"); // mozilla
odiv.appendChild(onew);

现在，setAttribute() 方法（带有 mozilla 注释）在 mozilla 中可以正常工作，但前提是它位于其上方的行之后。 换句话说，它似乎只是默认为最后设置的那个。 .onclick 方法（带有 ie 注释）在这两种情况下都不起作用，我使用它是否不正确？

无论哪种方式，我都找不到在 IE 中实现此功能的方法，更不用说在两者中了。 我在使用 .onclick 方法时确实更改了函数调用，并且仅使用对警报函数的简单调用就可以正常工作，这就是为什么我认为我的语法不正确。

长话短说，我无法让 onclick 参数在 IE/Mozilla 之间一致工作。

——尼古拉斯

Answer 1

onew.setAttribute("类型", "按钮");

切勿在 HTML 文档上使用 setAttribute。 IE 在很多情况下都会犯严重错误，而 DOM-HTML 属性更短、更快、更容易阅读：

onew.type= 'button';

onew.onclick = function(){fnDisplay_Computers("'" + alines[i] + "'"); }; //即

什么是“alines”？ 为什么要将其转换为字符串并用单引号引起来？ 看起来您正在尝试做一些令人发指的事情，涉及评估字符串中的代码（这就是您在下面的“onew.setAttribute”版本中所做的事情）。 在字符串中评估 JavaScript 代码几乎总是错误的； 像躲避瘟疫一样躲避它。 在上述情况下，IE 应该执行与 Firefox 相同的操作：它不应该工作。

如果 'alines[i]' 是一个字符串，我猜你想要做的是通过构造一个代码字符串来让它记住该字符串，该代码字符串将在 JavaScript 中计算为原始字符串。 但是：

"'" + alines[i] + "'"

还不够。 如果 'alines[i]' 中有撇号或反斜杠，会发生什么？

'O'Reilly'

你有一个语法错误和可能的安全漏洞。 现在，您可以做一些费力且烦人的事情，例如：

"'" + alines[i].split('\\').join('\\\\').split("'").join("\\'") + "'"

尝试转义字符串，但它很丑陋，并且不适用于其他数据类型。 您甚至可以要求 JavaScript 为您做这件事：

uneval(alines[i])

但并非所有对象都可以转换为可计算的 JavaScript 源字符串； 基本上整个方法注定会失败。

如果您只想让 onclick 回调调用带有参数的函数，那么通常要做的就是以简单的方式编写代码：

onew.onclick= function() {
    fnDisplay_Computers(alines[i]);
};

通常这会起作用并且正是您想要的。 然而，您可能在这里遇到了一个轻微的问题，这可能会让您困惑于考虑古怪的弦乐方法。

也就是说，如果在这种情况下“i”是封闭“for”循环的变量，则对“alines[i]”的引用将不会执行您认为的操作。 当点击发生时，回调函数将访问“i”——即循环完成之后。 此时，“i”变量将保留循环结束时的任何值，因此“alines[i]”将始终是“alines”的最后一个元素，无论单击哪个“onew”。

（请参阅如何修复 ActionScript 3 (AS3) 中的关闭问题，了解对此的一些讨论。这是导致问题的最大原因之一JavaScript 和 Python 中的闭包混淆了，有一天真的应该在语言级别上修复。）

您可以通过将闭包封装在其自己的函数中来解决循环问题，如下所示：

function callbackWithArgs(f, args) {
    return function() { f.apply(window, args); }
}

// ...

onew.onclick= callbackWithArgs(fnDisplay_Computers, [alines[i]]);

在更高版本的 JavaScript 中，您可以简单地说：

onew.onclick= fnDisplay_Computers.bind(window, alines[i]);

如果您希望今天能够在浏览器中使用“Function.bind()”，您可以从 原型框架，或者直接使用：

if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}

Answer 2

我通常使用类似的东西：

onew.onclick = new Function("fnDisplay_Computers('" + alines[i] + "')");

这应该在 IE e Firefox 中都有效。

Answer 3

将 addEventListener() 函数与“<对于基于 Mozilla 的浏览器，click”为 type 参数，并且 attachEvent() 函数，以“onclick”作为 sEvent 参数对于IE； 我发现最好使用 try/catch 语句，例如：

try {
  onew.attachEvent("onclick", //For IE
                   function(){fnDisplay_Computers("'" + alines[i] + "'"); });
}
catch(e) {
  onew.addEventListener("click", //For Mozilla-based browsers
                   function(){fnDisplay_Computers("'" + alines[i] + "'"); },
                   false);
}

Answer 4

我认为#3抗议太多了。 在很多情况下，我动态构建表并需要将参数传递给回调函数。 这不是类型安全问题，因为我的变量 parm 是相关表行的整数索引。 这是具有可变参数和固定参数的代码，似乎是跨浏览器兼容的：

for (i = 0; i < arrTableData.length; i++) {
    eleTR = objTable.insertRow(i + 1);
    cell = eleTR.insertCell(0);
    cell.width = "21";
    var myElement = document.createElement('img');
    myElement.setAttribute('src', 'images/button_down.gif');
    myElement.setAttribute('alt', 'Move item down');
    myElement.onclick = new Function('moveItem(' + i + ',0)');
    cell.appendChild(myElement);
}