の クリック時 イベントは通常、ユーザーが要素をクリックしたときに発生します。これにより、プログラマは要素がクリックされたときに JavaScript の関数を実行できます。このイベントは、フォームの検証、警告メッセージなどに使用できます。
JavaScript を使用すると、このイベントを任意の要素に動的に追加できます。を除くすべての HTML 要素をサポートします。 、、、、、 、、 、、
、、 そして 。つまり、適用できないということです。 クリック時 指定されたタグのイベント。
HTML では、 クリック時 属性を指定して、 JavaScript関数 それに。 JavaScript も使用できます addEventListener() メソッドを渡して、 クリック 柔軟性を高めるためにイベントを追加します。
構文
ここで、を使用する構文を見てみましょう。 クリック時 HTML および JavaScript （それなし addEventListener() メソッドまたはを使用して、 addEventListener() 方法）。
HTMLの場合
JavaScriptの場合
object.onclick = function() { myScript }; JavaScript で addEventListener() メソッドを使用する
object.addEventListener('click', myScript);
使い方を見てみましょう クリック時 イラストを使用したイベントを開催します。次に、使用例を見ていきます。 クリック時 HTML および JavaScript のイベント。
例1 - HTMLでのonclick属性の使用
この例では、 HTML クリック時 属性を指定し、それに JavaScript の関数を割り当てます。ユーザーが指定されたボタンをクリックすると、対応する機能が実行され、画面に警告ダイアログ ボックスが表示されます。
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me 今すぐテストしてください 出力
指定されたボタンをクリックすると、出力は次のようになります -
例2 - JavaScriptの使用
この例では、JavaScript を使用しています。 クリック時 イベント。ここで使用しているのは、 クリック時 段落要素を持つイベント。
ユーザーが段落要素をクリックすると、対応する関数が実行され、段落のテキストが変更されます。をクリックすると、 要素を変更すると、テキストの背景色、サイズ、境界線、色も変更されます。
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } 今すぐテストしてください 出力
テキストをクリックした後 クリックしてください。 出力は次のようになります -
例3 - addEventListener() メソッドの使用
この例では、JavaScript を使用しています。 addEventListener() 取り付ける方法 クリック イベントを段落要素に追加します。ユーザーが段落要素をクリックすると、段落のテキストが変更されます。
段落をクリックすると、要素の背景色とフォント サイズも変更されます。
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } 今すぐテストしてください 出力
テキストをクリックすると クリックしてください 、出力は次のようになります -
