clickとonclickの違いを詳しく解説-jsチュートリアル-php.cn

clickとonclickの違いを詳しく解説

php中世界最好的语言

リリース： 2018-06-09 11:55:44

オリジナル

3390 人が閲覧しました

今回はclickとonclickの違いと、clickとonclickを使用する際の注意点について詳しく説明します。以下は実際のケースですので見てみましょう。

ネイティブ JavaScript の click は、w3c では DOM ボタンオブジェクトとして説明されています。これは、ボタン上のマウスクリックをシミュレートできる HTML DOM click() メソッドでもあります。

button オブジェクトは、HTML ドキュメント内のボタンを表します。 button 要素にはデフォルトの動作はありませんが、それを使用するには onclick イベントハンドラーが必要です。

構文: buttonObject.click()

<html>
<head>
<script type="text/javascript">
function clickButton()
 {
 document.getElementById('button1').click()
 }
function alertMsg()
 {
 alert("Button 1 was clicked!")
 }
</script>
</head>
<body onload="clickButton()">
<form>
<input type="button" id="button1" onclick="alertMsg()" value="Button 1" />
</form>
</body>
</html>

ログイン後にコピー

onclickはイベント、イベントオブジェクトです。このイベントをサポートする JavaScript オブジェクト: ボタン、ドキュメント、チェックボックス、リンク、ラジオ、リセット、送信

HTML DOM イベントが発生する要素、キーボードキーのステータスなど、イベントのステータスを表すイベントオブジェクト、マウスの位置、マウスのボタンの状態。イベントは、イベントが発生するまで実行されない関数と組み合わせて使用されることがよくあります。

<html>
<body>
  Field1: <input type="text" id="field1" value="Hello World!"><br />
  Field2: <input type="text" id="field2"> <br />
  点击下面的按钮，把 Field1 的内容拷贝到 Field2 中： <br />
  <button onclick="document.getElementById(&#39;field2&#39;).value=document.getElementById(&#39;field1&#39;).value">Copy Text</button>
</body>
</html>

ログイン後にコピー

違い

前述したように、click はメソッドであり、onclick はイベントです。

最も基本的な質問は、メソッドとイベントの違いは何でしょうか?

違いは次のとおりです。

1. イベント名は通常、 on で始まります。 2. プログラマがそれを直接呼び出すステートメントを作成することです。トリガーされる]

3. イベントはプログラマーが呼び出す必要はありませんが、プログラマーは関数を作成して、その関数を対応するイベントに割り当てる必要があり、その呼び出しは対応するイベントがトリガーされたときに行われます。 [マウスがクリックされたときに何を行うかをブラウザに指示する] したがって、呼び出し順序は、最初にメソッド、次にイベントになります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS を使用して白黒だけを残して画像を操作する

React、redux、react-redux を使用する

以上がclickとonclickの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。