讀出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。