ホームページ  >  記事  >  ウェブフロントエンド  >  clickとonclickの違いを詳しく解説

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

php中世界最好的语言
php中世界最好的语言オリジナル
2018-06-09 11:55:443347ブラウズ

今回は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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。