最新のWeb開発のチュートリアル
 

onclickのイベント

イベントオブジェクト参照 イベントオブジェクト

例

ボタンがクリックされたときにJavaScriptを実行します。

<button onclick="myFunction()">Click me</button>
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

ユーザーが要素をクリックしたときのonclickイベントが発生します。

ブラウザのサポート

イベント
onclick はい はい はい はい はい

構文

HTMLには：

< »それを自分で試してみてください

JavaScriptで：

object .onclick=function(){ »それを自分で試してみてください

JavaScriptでは、使用してaddEventListener()メソッドを：

object .addEventListener("click", myScript );
»それを自分で試してみてください

注： addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョンでサポートされていません。

技術的な詳細

バブル： はい
取消し可能： はい
イベントの種類： MouseEvent
サポートされているHTMLタグ： <ベース>、<BDO>、<BR>、<HEAD>、<HTML>、<iframe>の、<メタ>、<PARAM>、<SCRIPT>、<スタイル>、および：以外のすべてのHTML要素、 <title>
DOMバージョン： レベル2のイベント
例

その他の例

例

クリックして<button>現在の曜日、日付と時刻を表示する要素：

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
»それを自分で試してみてください

例

クリックして<p>赤にそのテキストの色を変更する要素：

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>
»それを自分で試してみてください

例

色変更方法の別の例として<p>それをクリックすることで、要素を：

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>
»それを自分で試してみてください

例

別の入力フィールドに入力フィールドからテキストをコピーするにはボタンをクリックしてください：

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
»それを自分で試してみてください

例

割り当て"onclick"ウィンドウオブジェクトにイベントを：

window.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
»それを自分で試してみてください

例

ドロップダウンボタンを作成するために、onclickの使用：

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
»それを自分で試してみてください

関連ページ

HTML DOMリファレンス： れるondblclickイベント

HTML DOMリファレンス： OnMouseDownイベントの

HTML DOMリファレンス： onMouseUpのイベント

<イベントオブジェクト