javascript - 读出 JavaScript onClick 函数体并将其用于另一个 onClick

Question

我尝试将 onClick 函数从图像复制到 span 对象。但我不明白。

我已经直接使用 onClick=img.onClick、onClick=new Function(img.onClick) 等进行了尝试。

if (img.onclick != undefined)
{
    var imgClick = img.onclick;
    strNewHTML = strNewHTML + " onMouseOver=\"this.style.background"
    + "= '#cecece'\" onMouseOut=\"this.style.background = ''\" onclick=\""+imgClick+"\">";
}

谁能帮帮我？

谢谢!

Answer 1

span.onclick= img.onclick;

JavaScript 区分大小写，DOM 事件处理程序属性全部小写。

编辑:

if (img.onclick != undefined) {
    strNewHTML = strNewHTML + " onMouseOver=\"this.style.background"
    + "= '#cecece'\" onMouseOut=\"this.style.background = ''\" onclick=\""+imgClick+"\">";
}

那是完全不同的事情。您正在创建一个 HTML 字符串。但是 onclick DOM 属性包含一个 function目的。 function对象不能添加到字符串中。 (如果您调用 somefunction.toString()，它们会转换为您所得到的，这不是可以用作事件处理程序的东西。)

如果您想获取 onclick 的文本值要添加到 HTML 中的属性，您必须使用 span.getAttribute('onclick') 来完成方法。 但是由于 getAttribute 实现中的错误，这在 IE 中不起作用, 所以你必须求助于 span.getAttributeNode('onclick').value .然后，当您将它添加到 HTML 字符串中时，您必须对它进行 HTML 转义，以便任何 < , &和 "其中的字符显示为 <等等，否则它们会破坏标记。

但是，这真的很难看； 不要这样做。实际上，HTML 字符串转换总是很糟糕。尤其是当您在 JavaScript 字符串中的 HTML 中包含 JavaScript 代码时。转义规则变得疯狂，如果您在转义来自用户输入的内容时犯了错误，您就会给自己一个跨站点脚本安全漏洞。

相反，使用 DOM 方法。这消除了等式中的所有转义，而且它通常比拼凑在一起的 HTML 标记字符串更具可读性。然后你可以自由分配onclick到你喜欢的任何功能。例如:

var span= document.createElement('span');
if (img.onclick)
    span.onclick= img.onclick;
span.onmouseover= function() {
    this.style.background= '#CECECE';
};
span.onmouseout= function() {
    this.style.background= '';
};

someparentelement.appendChild(span);

还可以考虑用简单的 CSS 替换鼠标悬停/鼠标悬停 :hover规则，为了可维护性。唯一仍然需要 :hover 帮助的浏览器是IE6。