內聯事件處理程序和匿名函數

我需要在頁面中動態包含並運行腳本。我使用的是圖像的onload事件這樣的：內聯事件處理程序和匿名函數

<img src="blank.gif" onload="DoIt" />

的DOIT功能看起來像這樣（只是由這個例子）：

this.onload=' ';this.src='image.jpg';

我在頁面本身沒有控制（我只控制該頁面將調用的HTML字符串），所以我需要在標記中明確包含DoIt函數。

我嘗試使用匿名函數，但它沒有工作：

<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />

如果我只是寫劇本在線，就像這樣：

<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />

而且在這種情況下，還有什麼限制（如腳本長度）？

感謝您的幫助！

來源

2010-12-03 Christophe

的this不會在函數內部工作，因爲函數被window對象調用，因此this將參考window。

如果你想換一個函數內部的代碼，必須用該功能，與this集的元素調用或通過this作爲參數：

<html> 
    <body> 
     <!-- call the function and set the this accordingly--> 
     <img src="foo.png" onload="(function(){...}).call(this)" /> 

     <!-- pass the this as a parameter --> 
     <img src="foo.png" onload="(function(e){....})(this)" /> 
    </body> 
</html>

然而，這並沒有真正的道理給我：

我在頁面本身沒有控制（我只控制HTML字符串，該頁面會調用），

你只能控制img標籤嗎？如果你可以輸出abritary HTML，那麼爲什麼不把一些東西放在`script'標籤中呢？

更新
有了一個腳本塊，你可以聲明你的函數在那裏，然後簡單地調用它的onload事件。

<script> 
    function doIt(el) { 
     // code in here 
     console.log(el.id); // you could do stuff depending on the id 
    } 
</script> 

<img id="img1" src="foo.png" onload="doIt(this)" /> 
<img id="img2" src="foo.png" onload="doIt(this)" />

現在，你只需要一個功能的許多圖像。

如果你需要真的很喜歡，你可以設置你的腳本標籤來拉入jQuery或任何其他庫。

<script src="somepathtojquery"></script> 
<script> 
    // do jquery stuff in herep

如果您需要很多這些處理程序jQuery可以完成這項工作。

仍然我問自己，當你完全控制HTML爲什麼你不首先使用庫？ :)

來源

2010-12-03 03:30:30

嘗試：

<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />

來源

2010-12-03 03:28:26

伊沃首先回答，但也謝謝你！ – Christophe 2010-12-03 04:47:08

感謝盒這一個作品！ – Marin 2011-11-02 18:14:13

內聯事件處理程序和匿名函數

回答

相關問題