JavaScriptイベント：イベントを作成する3つの方法

Webサイトにインタラクティブ機能を追加することは、JavaScriptが優れているところです。 HTMLとCSSはそれぞれWebページの構造とスタイルを設定するために使用されますが、JavaScriptを使用してサイトをより動的にすることができます。

JavaScriptでは、イベントはサイトをインタラクティブにするために使用されます。このガイドでは、JavaScriptイベントについて説明します。イベントを使用できる場所、イベントを定義する方法、およびイベントを呼び出す方法について説明します。始めましょう！

JavaScriptイベントとは何ですか？

イベントは、ブラウザまたはユーザーのいずれかによってトリガーでき、Webページの状態を変更できます。 Webページのボタンをクリックすると、JavaScriptイベントが作成されます。展開するドロップダウンメニューをクリックすると、JavaScriptイベントが使用されます。

JavaScriptイベントには、次のような幅広い用途があります。

フォームに記入されているかどうかを確認する
ユーザーがフォームに入力したときに別のページに移動する
ドロップダウンメニューをインタラクティブにする
ユーザーが画像をズームインおよびズームアウトできるようにする

JavaScriptでイベントを操作するには、イベントハンドラーとイベントリスナーの2つの概念について知っておく必要があります。

イベントハンドラは、Webページでイベントがトリガーされたときに実行される関数です。イベントリスナーはイベント関数をHTML要素に接続するため、その関数が実行されると、Web要素が変更されます。

イベントハンドラーは、インラインイベントハンドラー、イベントプロパティ、またはイベントリスナーのいずれかを使用する3つの方法のいずれかで定義できます。

インラインイベントハンドラー

JavaScriptでイベントを開始する最も簡単な方法は、インラインイベントハンドラーを使用することです。これは、イベントをHTMLファイルで定義することを意味します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

この例では、JJ Smith’sBakeryというパン屋のウェブサイトを設計していると仮定します。「応答を受信しました」というテキストでユーザーにプロンプトを表示する必要があります。フォームを送信するとき。

次のコードを検討してください：

<!DOCTYPE html>
<html>
	<head>
		<title>JJ Smith's Bakery</title>
	</head>

	<script src="main.js"></script>

	<body>
		<p id="submitted"></p>
		<button onclick="submitForm()">Submit form</button>
	</body>
</html>

このコードは、次のようなWebページをレンダリングします。

これまでのところ、あまり進んでいません。私たちのウェブページには、ボタンをクリックしたときに何かをするはずのボタンが含まれています。ボタンをクリックしても何も起こりません。これは、イベントハンドラーをまだ作成していないためです。

main.jsファイルに、次のコードを貼り付けます。

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

このコードは、IDが「送信済み」の要素を検索し、そのコンテンツを「フォーム送信済み」に変更します。このコードは、submitForm()の場合にのみ実行されます関数が呼び出されます。これは、ユーザーがボタンをクリックしたときに発生するようにスケジュールされています。

ボタンをクリックすると、次のようになります。

ご覧のとおり、プロンプトが表示されます。インラインイベントハンドラーを使用して、Webページをインタラクティブにしました。ただし、JavaScriptでイベントを使用する方法はインラインイベントハンドラーだけではありません。コードでイベントハンドラプロパティを使用する方法について説明しましょう。

ハンドラープロパティを持つイベント

インラインハンドラーでは、HTMLファイルで実行する関数を指定する必要があります。以前のHTMLコードでは、次の行で、ボタンが押されたときに呼び出したい関数を定義しました。

<button onclick="submitForm()">Submit form</button>

ハンドラープロパティを使用して、コードから「onclick」イベントを削除できます。これにより、WebページをインタラクティブにするすべてのJavaScriptを独自のファイルに移動できます。この例では、ボタンにID「button」を割り当てて、JavaScriptコードでボタンを識別できるようにします。 onclickイベントを削除して、ボタンにIDを割り当てましょう：

<button id="button">Submit form</button>

ボタンが押されたときにイベントを発生させるために、「main.js」ファイル内にハンドラープロパティを使用してイベントを記述します。使用するコードは次のとおりです。

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.onclick = submitForm;

このコードを実行してボタンをクリックすると、以下が返されます。

ボタンは以前と同じように機能しますが、コードは別の方法で記述されています。イベントハンドラーをインラインで作成するのではなく、main.jsファイルに移動しました。これにより、インラインイベントがトリガーされる場所を見つけるためにすべてのHTMLコードを読み取る必要がなくなるため、より保守しやすいコードを作成できます。

イベントリスナー

イベントリスナーを使用して、JavaScriptでイベントを宣言できます。リスナーは、要素の状態が変更されたときに常に検索し、その要素が変更された場合、リスナーのコードが実行されます。

たとえば、イベントリスナーに接続されているボタンをクリックすると、リスナーはマウスイベントがトリガーされたことを「聞き取り」ます。次に、その特定のイベントリスナーに関連付けたコードを実行します。

この例のHTMLコードは上記と同じですが、「main.js」ファイルに小さな変更を加えます。

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.addEventListener("click", submitForm);

このコードでは、addEventListenerを使用していますイベントリスナーを作成します。これは、submitForm()をバインドする代わりです最後の2つの例で行ったように、JavaScriptはonclickイベントに機能します。

「クリック」を指定して、ボタンがマウスポインタでクリックされたときにリッスンするようにコードに指示します。クリックイベント以外にも、キーボードイベントなど、他の種類のイベントがありますが、このチュートリアルでは、マウスクリックイベントに焦点を当てます。

コードをもう一度実行して、ボタンをクリックしてみましょう。

出力は前の2つの例で見たものと同じですが、今回はHTMLイベントリスナーを使用しています。イベントリスナーは、JavaScriptでイベントを宣言するための最新の方法であり、おそらく最も一般的に使用される方法です。

結論

JavaScriptイベントを使用すると、Webページをインタラクティブにすることができます。ボタンを押したり、フォームを送信したり、テキストにカーソルを合わせたりすると、イベントがトリガーされる可能性があります。 JavaScriptでイベントを宣言するには、インライン、プロパティの使用、リスナーの使用の3つの方法があります。

これで、プロのWeb開発者のようにJavaScriptでイベントを作成する準備が整いました。

JavaScriptオブジェクト：ガイド

JavaScript数学：初心者のためのガイド

JavaScriptでスクロールイベントを説明します。
JavaScriptのスクロールイベントは、ユーザーがスクロールバーを上下に動かして操作したときに発生します。以下はJavaScriptのスクロールイベントのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l
JavaScriptで配列を空にする方法の数
JavaScriptで配列を空にするには、4つの方法があります- 新しいアレイへの設定 −これでは、配列変数を新しい空の配列に設定します。長さプロパティの使用 −これでは、配列の長さプロパティを0に設定します。ポップの使用 −これでは、長さが0に達するまで配列要素を連続的にポップします。スプライスの使用 −ここでは、開始インデックスを0とし、削除する要素の数をarray.length-1とします。以下は、noを表示するコードです。 JavaScriptで配列を空にする方法の例- 例 <!DOCTYPE html> <html lang="en"