インラインイベントハンドラと匿名関数

私は、ページにスクリプトを動的にインクルードして実行する必要があります。私は、ページ自体（私は唯一の制御に制御することはできませんインラインイベントハンドラと匿名関数

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

：

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

ドイト機能は次のようになります（ちょうどこの例を作った）：私はこのために、画像のonloadイベントを使用していますページが呼び出す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ゆえ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)" />

これで、多くの画像で1つの機能しか必要ありません。

あなたが本当に気に入らなければならない場合は、スクリプトタグを設定してjQueryや他のライブラリをプルすることができます。

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

これらのハンドラが大量に必要な場合は、jQueryがその役割を果たします。

まだHTMLを完全にコントロールしているときに私は自分自身に質問しています。なぜ、最初にライブラリを使用しないのですか？ :)

出典

2010-12-03 03:30:30

申し訳ありませんが、最後の文章でタグ名が表示されません。 – Christophe

ダン、愚かなマークダウンスクリプトタグを削除しました。 –

私は、スクリプトタグを使用すると、コードはページに追加されますが実行されないことを理解しています。 img onloadの目的は、実行をトリガすることです。 – Christophe

してみてください。関数はwindowオブジェクトによって呼び出されるため

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

出典

2010-12-03 03:28:26

私は最初に答えましたが、ありがとうございます！ – Christophe

ありがとうボックスこれは動作します！ – Marin

簡単な例。 +1 – DarkNeuron

インラインイベントハンドラと匿名関数

答えて

関連する問題