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

Jun 09, 2018 am 11:55 AM
click javascript onclick 使用法

今回は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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JSPコメントの使用法と分類を分析する JSPコメントの使用法と分類を分析する Feb 01, 2024 am 08:01 AM

JSP コメントの分類と使用状況の分析 JSP コメントは 2 つのタイプに分類されます。 単一行コメント: で終わる、単一行のコードのみコメントできます。複数行のコメント: /* で始まり */ で終わると、複数行のコードにコメントを付けることができます。単一行のコメントの例 複数行のコメントの例/**これは複数行のコメントです*コードの複数行にコメントできます*/JSP コメントの使用法 JSP コードを読みやすくするために JSP コメントを使用できます。

WPSdatedif関数の使い方 WPSdatedif関数の使い方 Feb 20, 2024 pm 10:27 PM

WPS は一般的に使用されるオフィス ソフトウェア スイートであり、WPS テーブル関数はデータ処理と計算に広く使用されています。 WPS テーブルには、2 つの日付間の時差を計算するために使用される、DATEDIF 関数という非常に便利な関数があります。 DATEDIF 関数は英語の DateDifference の略語で、構文は次のとおりです: DATEDIF(start_date,end_date,unit) ここで、start_date は開始日を表します。

C言語でexit関数を正しく使用する方法 C言語でexit関数を正しく使用する方法 Feb 18, 2024 pm 03:40 PM

C 言語で exit 関数を使用する方法には、具体的なコード例が必要です。C 言語では、プログラムの実行をプログラムの初期段階で終了したり、特定の条件下でプログラムを終了したりする必要があることがよくあります。 C 言語には、この関数を実装するための exit() 関数が用意されています。この記事では、exit() 関数の使用法を紹介し、対応するコード例を示します。 exit() 関数は C 言語の標準ライブラリ関数であり、ヘッダー ファイルに含まれています。その機能はプログラムの実行を終了することであり、整数を取ることができます。

MySQL ISNULL関数の詳しい解説と使い方紹介 MySQL ISNULL関数の詳しい解説と使い方紹介 Mar 01, 2024 pm 05:24 PM

MySQL の ISNULL() 関数は、指定された式またはカラムが NULL かどうかを判断するために使用される関数です。ブール値、式が NULL の場合は 1、それ以外の場合は 0 を返します。 ISNULL()関数は、SELECT文やWHERE句の条件判定に使用できます。 1. ISNULL() 関数の基本構文: ISNULL(expression) ここで、expression は、NULL かどうかを判断する式です。

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Apple ショートカットの使用方法 Apple ショートカットの使用方法 Feb 18, 2024 pm 05:22 PM

Apple ショートカット コマンドの使用方法 技術の継続的な発展により、携帯電話は人々の生活に欠かせないものになりました。数ある携帯電話ブランドの中でも、Appleの携帯電話は安定したシステムと強力な機能で常にユーザーに愛されています。その中で、Apple ショートカット コマンド機能は、ユーザーの携帯電話体験をより便利かつ効率的にします。 Apple ショートカットは、Apple が iOS12 以降のバージョン向けに開始した機能で、ユーザーがカスタム コマンドを作成して実行することで携帯電話の操作を簡素化し、より効率的な作業や作業を実現するのに役立ちます。

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

SQL の解析での unique キーワードの使用 SQL の解析での unique キーワードの使用 Feb 18, 2024 pm 09:21 PM

SQL での個別の使用法の詳細な説明 SQL データベースでは、重複データを削除する必要がある状況によく遭遇します。現時点では、distinct キーワードを使用すると、重複データを削除し、クエリ結果をより明確かつ正確にすることができます。 Different の基本的な使用法は非常に簡単で、select ステートメントで Distinct キーワードを使用するだけです。たとえば、次は通常の選択ステートメントです: SELECTcolumn_name

See all articles