JavaScriptのイベントとは何ですか?また、それらはどのように処理されますか?



JavaScriptのイベントは、Webページへの動的なインターフェイスを提供します。これらのイベントは、Document Object Model(DOM)の要素に接続されています。

イベントは、システムで発生するアクションまたは発生です。プログラミングの世界では、 イベントは、HTML要素に発生するものです。でもいつ HTMLページで使用され、これらのイベントに反応できます。この記事では、JavaScriptのさまざまなタイプのイベントと、それらがどのように機能するかを次の順序で確認します。

JavaScriptのイベントとは何ですか?

Javascriptには、Webページへの動的インターフェイスを提供するイベントがあります。これらのイベントは、の要素に接続されています ドキュメントオブジェクトモデル (判定)。





また、これらのイベントはデフォルトでバブリング伝播を使用します。つまり、DOM内で子から親へと上向きに伝播します。イベントは、インラインまたは外部スクリプトとしてバインドできます。 JavaScriptの助けを借りて、特定のイベントがいつ発生するかを検出し、それらのイベントに応答して物事を発生させることができます。

JavaScriptのイベントの種類

にはさまざまな種類のイベントがあります イベントに反応するために使用されます。ここでは、次のような有名な、または最も一般的に使用されるイベントのいくつかについて説明します。



  • オンクリック
  • オンキーアップ
  • オンマウスオーバー
  • オンロード
  • オンフォーカス

それでは、先に進んで、JavaScriptでこれらのイベントを例を挙げて見てみましょう。

Onclickイベント

Onclickイベントはマウスイベントであり、ユーザーがバインドされている要素をクリックすると、定義されたロジックを引き起こします。例を見て、それがどのように機能するかを見てみましょう。

function edu(){alert( 'Welcome to Edureka!')}ボタンをクリックします

出力:



出力1-javascriptのイベント-edureka

ボタンをクリックすると、次のアラートメッセージが表示されます。

Onekeyupイベント

このイベントはキーボードイベントであり、押した後にキーを離すたびに命令を実行するために使用されます。次の例は、イベントの動作を示しています。

var a = 0 var b = 0 var c = 0 function changeBackground(){var x = document.getElementById( 'bg')bg.style.backgroundColor = 'rgb(' + a + '、' + b + '、' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if(a> 255)a = a --b if(b> 255)b = a if(c> 255)c = b}

出力:

何かを書いた後は、次のようになります。

オンマウスオーバーイベント

JavaScriptのonmouseoverイベントは、要素とそれがバインドされている子の上にマウスポインタを置くことに対応します。例を以下に示します。

function hov(){var e = document.getElementById( 'hover')e.style.display = 'none'}

出力:

マウスにカーソルを合わせる前に、色付きのボックスが表示されます。ボックスの上にマウスを置くとすぐに消えます。

オンロードイベント

onloadイベントは、要素が完全にロードされたときに呼び出されます。例を見て、それがどのように機能するかを見てみましょう。

  edu-ロゴ 

出力:

オンフォーカスイベント

Onfocusイベントには、フォーカスを受け取るたびに命令を実行する要素リストがあります。次の例は、onfocusイベントがどのように機能するかを示しています。

Javaの例のスキャナークラス
関数focused(){var e = document.getElementById( 'input')if(confirm( 'Focus Event')){e.blur()}}

入力ボックスにフォーカス:

出力:

これらは、JavaScriptで最も頻繁に使用されるイベントの一部です。これで記事は終わりです。イベントとは何か、どのように使用されるかをご理解いただければ幸いです。

私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。

質問がありますか?このブログのコメントセクションでそれについて言及してください。折り返しご連絡いたします。