JavaScriptOnclickイベントの説明

onclickJavaScriptのイベントを使用すると、プログラマーは要素がクリックされたときに関数を実行できます。

ボタンオンクリックの例

Click me  function myFunction() { alert('Button was clicked!'); } 

上記の簡単な例では、ユーザーがボタンをクリックすると、ブラウザにが表示されるアラートが表示されButton was clicked!ます。

onclickを動的に追加する

onclickイベントはまた、プログラム次の例に、次のコードを使用して、任意の要素に追加することができます。

click on this element.

var p = document.getElementById("foo"); // Find the paragraph element in the page p.onclick = showAlert; // Add onclick function to element function showAlert(event) { alert("onclick Event triggered!"); }

注意

onclickを使用すると、リスナー関数を1つだけ追加できることに注意してください。さらに追加する場合は、addEventListener()を使用します。これは、イベントリスナーを追加するための推奨される方法です。

上記の例では、ユーザーがのparagraph要素をクリックすると、htmlを示すアラートが表示されonclick Event triggeredます。

デフォルトアクションの防止

ただし、onclickリンク(HTMLのaタグ)にアタッチする場合は、デフォルトのアクションが発生しないようにする必要があります。

Guides  function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

上記の例では、コールバック関数内aを使用して、要素(リンクを開く)のデフォルトの動作を防止しました。event.preventDefault()onclick

MDN

その他のリソース

jQuery .on()イベントハンドラーの添付ファイル