Javascriptを使用して、イベントハンドラをドキュメント要素にオンザフライで添付する方法は？

StackOverflow https://stackoverflow.com/questions/1411545

  •  05-07-2019
  •  | 
  •  

質問

onclick = alert（<！> quot; Hi <！> quot;）;のようなイベントハンドラをアタッチする方法はありますか？既存のドキュメント要素に？ （私の場合の画像）

私はすでに次のことを試みて失敗しました：

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.onclick = function(evt) {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

function handler(evt) {"alert('hi')";}
img.onclick = handler;

アイデアが不足しています。誰もこれを行う方法を知っていますか？

役に立ちましたか？

解決

zzandyによる最初の答えは問題ないはずです。すべてを正しく実行していることを確認してください。特に、Firefoxは、コンプライアントモードであることを確認するのが難しい場合があります。完全なコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function AttachEvent()
{
    var theElement = document.getElementById( 'the_image' );
    theElement.onclick = function () { alert('message'); }
}
</script>
</head>
<body>
<img id='the_image' src='some_img.jpg' title='Click on the image' alt='Image not found' />
<button onclick='AttachEvent();'>Enable Click on image</button>
</body>
</html>

他のヒント

element.onclick = function(event){alert("message");}

この場合、event引数はオプションです。関数の本体は文字列ではなくコードです。

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

これは文字列を割り当てています。

img.setAttribute ('onclick',"alert('hi')");

これも文字列を割り当てています。

img.onclick = function() {"alert('hi')";};

これは関数を割り当てていますが、含まれている関数はすべて文字列です。 alert('hi')付近から引用符を削除する必要があります。

img.onclick = function(evt) {"alert('hi')";};

再び、文字列のみを含む関数。

img.setAttribute ('onclick',function() {"alert('hi')";});

もう一度... 

function handler(evt) {"alert('hi')";}
img.onclick = handler;

そしてまた。

<body>
<input type="image" id="myImageInput">

<script type="text/javascript">
var theImageInput = document.getElementById('myImageInput');
theImageInput.onclick = function () { alert('myImageInput onclick invoked!'); }
</script>
</body>

Firefox 3.5.3でテストおよび動作しています。

重要なポイント：

  • ドキュメントでレンダリングされた後、要素への参照を取得する必要があります。
  • Firefoxは、各要素の名前/ IDをグローバル変数にしないという点でInternet Explorerとは異なります。 FirefoxではmyImageInput.onclick = ...は機能しません。document.getElementById(theID)またはdocument.forms['formName'].elements['elementNAME']（<form>にある場合）を使用して、参照を取得する必要があります。

上記のコピーしてドキュメントに貼り付けたサンプルがFirefox 3.5で機能しない場合は、すべてのアドオンを無効にしてください（そのうちの1つが問題を引き起こしている可能性があります）。それでも解決しない場合は、質問を編集して正確なソースを表示してください。そうでない理由を判断するのに役立ちます。動作しています。

これは目を覚ましている！

<img src="PathToImage" id="myImage" height="30px" width="30px" />

<script type="text/javascript">
    var i = document.getElementById("myImage");
    i.onclick = function() { alert("hello"); };
</script>

編集：-IE 7、Chrome 4x、FF 3.5xでテスト済み

img.onclick = function() { alert('hi'); };
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top