HTML の onclick ボタン

HTML には、Web ページを検証してナビゲートするために、ユーザー要求データをサーバー (バックエンド) に送信するためのボタンがあります。主に、イベント属性に onclick ボタンを使用し、すべてのブラウザでサポートされている場合、スクリプト内でこのイベント関数を使用する場合は常にブラウザ互換機能も同様です。ユーザーが をクリックすると、イベントが表示されます。タグを使用するには、 に onclick イベントを追加する必要があります。要素。その後、ユーザー側でボタンが呼び出されるかクリックされると、スクリプト上でボタン タグが実行されます。これは、onclick 属性を持つ HTML オブジェクト内の特定のコード行で実行されます。

onclick ボタンの動作

主に、ユーザーがボタンをクリックする必要がある場所で関数をトリガーして呼び出すために使用されます。ユーザーが を介してマウスをクリックすると、 Onclick イベントの要素を使用すると、JavaScript などの関数が呼び出されます。onclick イベント属性には、基本的に、イベントのバックエンドで動作するスクリプトの値が 1 つだけ含まれます。

構文:

<button name="" value="" onclick> ="function()"/></button>

上記の構文は、HTML 属性での onclick イベントの基本的な使用法です。また、ユーザーの要件に応じて必要に応じてイベントをカスタマイズしました。

HTML の onclick ボタンの例

以下は、HTML の onclick ボタンの例です。

例 #1

コード:

<button onclick="Function()">Click</button>
<p id="sample"></p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>

出力:

上記の例では、JavaScript 関数を作成しました。さらに、ユーザーが「クリック」ボタンをクリックすると、ブラウザ自体に値「ようこそ」が表示されます。

例 #2

コード:

<p id="sample" onclick="Function()">Click</p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>

出力:

上の例も前の例 1 で説明したものと同じですが、ここでは を使用していません。その代わりに、

内の関数とイベントを直接呼び出します。タグ(段落)タグ。したがって、コード行が減ります。

例 #3

コード:

Username: <input type="text" id="user" value="sivaraman"><br>
Password: <input type="text" id="pass"><br><br>
<button onclick="Function()">Click</button>
<script>
function Function() {
document.getElementById("pass").value = document.getElementById("user").value;
}
</script>

出力:

上記の例では、ユーザー名からパスワードに自動的にコピーされる「クリック」ボタンを選択した後、JavaScript 関数を呼び出してユーザー名からパスワードに値をコピーしました。これは、onclick イベントの基本操作の 1 つです。

さまざまなイベントの OnClick イベント

• グローバル イベント ハンドラーなどの他のイベントで使用される onclick プロパティ属性も、HTML 要素のクリック イベントを処理するために使用されるイベント ハンドラーの下のイベント ハンドラー メカニズムの 1 つです。ユーザーリクエスト後にクリックイベントが発生すると、マウスダウンイベントとマウスアップイベントの後に何らかの順序でクリックイベントが発生します。
• クリックイベントにはいくつかのトリガーアクションもあります。同じアクションを「キーダウン」イベントに追加することを検討してください。これにより、マウス ポインターやタッチ スクリーンを使用しないユーザーでも同じアクションを使用できるようになります。 onclick イベント用に JavaScript にいくつかの組み込み関数があります。
• 関数が唯一の引数として MouseEvent オブジェクトを受け取る場合、この関数はトリガーされるイベントの要素にもなります。 1 つのオブジェクトに対して一度に割り当てられるクリック イベント ハンドラーは 1 つだけです。 EventTarget.addEventListener() メソッドを使用すると、より柔軟になるためです。

たとえば、クリック後に指定された値の色を変更したい場合です。

<div id="example">Click</div>
<script>
document.getElementById('example').onclick = function changeContent() {
document.getElementById('example').innerHTML = "Welcome to my domain";
document.getElementById('example').style = "Color: green";
}
</script>

出力:

• 上記の例では、クリック イベントを呼び出して、ユーザーの画面上のテキストの色を変更しただけです。多くのイベント トリガー関数と同様に、これはユーザー要件だけでなく実行時の目論見書にも役立つ可能性があります。
• Onclick イベントは、画像オブジェクトの属性でもあります。また、ユーザーがボタンまたは画像オブジェクトをクリックしたときに評価される式も含まれています。 onclick イベントは、ユーザーが画像のどの部分をクリックするかに応じて、いくつかの異なる処理を実行します。通常、ハンドラーは のような HTML 属性で設定できます。ユーザーがマウス カーソルを使用してクリックすると、onclick 内のコードが実行されます。HTML 属性名は大文字と小文字が区別されないため、onclick は onClick として機能しますが、通常、属性は小文字で使用されます。
• 移動ボタンを押したときと同じように、form タグを使用して Web ページにアクセスすると、コントローラーはバックエンド ロジックでユーザー要件を検証し、結果ビューを表示できます。また、Web ページもリロードされます。場合によっては、onclick イベントが JavaScript 検証で機能しないことがあります。つまり、onclick イベントの関数を呼び出す HTML ページのスクリプトをユーザーが確認する必要があり、また関数の名前を変更する必要がありますが、関数 onclick() が定義されている場合、その時点では機能しません。ユーザー入力または「いいね！」ボタンは、JavaScript 関数よりも高い優先順位を取得します。

ここでは、HTML タグで onclick イベントを使用する際に役立ついくつかの提案を示します。

1. onclick=”javascript:function()” は使用せず、href ハイパーリンクのような属性内の javascript : のようなプレフィックスのみを使用してください:

2. onclick=” function()” や onclick=” function();” のようにセミコロンで終わることはありません。どちらも問題なく動作しますが、関数の終了にセミコロンを使用することはお勧めできません。

3. onclick、onCLICK、ONCLICK などのイベント属性はすべて機能しますが、一般的には属性を小文字で書きます。JavaScript 自体でも大文字と小文字が区別されます。 document.getElementById().onclick=” のように記述する場合は、すべてが小文字。

結論

onclick は、JavaScript 関数のイベント トリガーでもあります。ユーザーの検証や Web ページの移動に役立つ場合があります。 jquery では、ユーザー定義要件の主要部分として onclick イベントも使用します。 React js や angular など、onclick 関数で使用する他のフレームワークもいくつかあります。また、Google Chrome、Mozilla Firefox、safari など、最近のほとんどのブラウザーもサポートしています。JavaScript では、onclick イベント関数を処理できるだけでなく、「on select、onsubmit、onselect」などの他の属性にも使用できます。 onggle,onkeyup " など。ユーザーの要件に基づいて、HTML でイベント属性を使用できます。

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