读出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() ，它们会被转换为你得到的东西，这不会起到事件处理程序的作用。）

如果要获取要添加到HTML中的onclick属性的文本值，则必须使用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规则替换mouseover / mouseout，以实现可维护性。 唯一仍需要帮助的浏览器:hover是IE6。