イベントは、システムで発生するアクションまたは発生です。プログラミングの世界では、 イベントは、HTML要素に発生するものです。でもいつ HTMLページで使用され、これらのイベントに反応できます。この記事では、JavaScriptのさまざまなタイプのイベントと、それらがどのように機能するかを次の順序で確認します。
JavaScriptのイベントとは何ですか?
Javascriptには、Webページへの動的インターフェイスを提供するイベントがあります。これらのイベントは、の要素に接続されています ドキュメントオブジェクトモデル (判定)。
また、これらのイベントはデフォルトでバブリング伝播を使用します。つまり、DOM内で子から親へと上向きに伝播します。イベントは、インラインまたは外部スクリプトとしてバインドできます。 JavaScriptの助けを借りて、特定のイベントがいつ発生するかを検出し、それらのイベントに応答して物事を発生させることができます。
JavaScriptのイベントの種類
にはさまざまな種類のイベントがあります イベントに反応するために使用されます。ここでは、次のような有名な、または最も一般的に使用されるイベントのいくつかについて説明します。
- オンクリック
- オンキーアップ
- オンマウスオーバー
- オンロード
- オンフォーカス
それでは、先に進んで、JavaScriptでこれらのイベントを例を挙げて見てみましょう。
Onclickイベント
Onclickイベントはマウスイベントであり、ユーザーがバインドされている要素をクリックすると、定義されたロジックを引き起こします。例を見て、それがどのように機能するかを見てみましょう。
function edu(){alert( 'Welcome to 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イベントは、要素が完全にロードされたときに呼び出されます。例を見て、それがどのように機能するかを見てみましょう。
出力:
オンフォーカスイベント
Onfocusイベントには、フォーカスを受け取るたびに命令を実行する要素リストがあります。次の例は、onfocusイベントがどのように機能するかを示しています。
Javaの例のスキャナークラス
関数focused(){var e = document.getElementById( 'input')if(confirm( 'Focus Event')){e.blur()}}入力ボックスにフォーカス:
出力:
これらは、JavaScriptで最も頻繁に使用されるイベントの一部です。これで記事は終わりです。イベントとは何か、どのように使用されるかをご理解いただければ幸いです。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか?このブログのコメントセクションでそれについて言及してください。折り返しご連絡いたします。