JavaScript のイベントを深く理解する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript のイベントを深く理解する

青灯夜游

Sep 28, 2020 pm 05:56 PM

javascriptプロトタイプ継承する

JavaScript のイベントを深く理解する

この記事では、イベントハンドラー、イベントリスナー、およびイベントオブジェクトについて説明します。また、イベントを処理する 3 つの異なる方法と、最も一般的な方法のいくつかについても説明します。イベントを理解することで、よりインタラクティブな Web エクスペリエンスをユーザーに提供できるようになります。

イベントはブラウザ内で発生する操作であり、ユーザーまたはブラウザ自体によって開始できます。 Web サイトで発生する一般的なイベントをいくつか紹介します。

ページの読み込みが完了しました
ユーザーがボタンをクリックしました
##ユーザーがキーボードのキーを押す
イベントで実行される JavaScript 応答をエンコードすることにより、開発者はユーザーへのメッセージの表示、データの検証、ボタンのクリックへの反応、その他多くのアクションの実行が可能になります。

イベントハンドラーとイベントリスナー

ユーザーがボタンをクリックするかキーを押すと、イベントがトリガーされます。これらはそれぞれクリックイベントまたはキーイベントと呼ばれます。

イベントハンドラーは、イベントがトリガーされたときに実行される JavaScript 関数です。

イベントリスナーは応答インターフェイス要素にアタッチされ、特定の要素が特定のイベントの発生を待機して「リッスン」できるようになります。

イベントを要素に割り当てる方法は 3 つあります。

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

イベントハンドラーのプロパティ
イベントリスナー
# これら 3 つの方法を詳しく説明して、イベントをトリガーする各方法をよく理解してから、説明します。各方法の詳細、長所と短所。

インラインイベントハンドラーのプロパティ

イベントハンドラーについて学習し始めるために、まずインラインイベントハンドラーについて考えます。 button 要素と p 要素で構成される非常に基本的な例から始めましょう。ユーザーにボタンをクリックして p のテキスト内容を変更してもらいたいと考えています。

ボタンのある HTML ページから始めましょう。後でコードを追加する JavaScript ファイルを参照します。

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <!-- Add button -->
    <button>Click me</button>
    <p>Try to change me.</p>
  </body>
  <!-- Reference JavaScript file -->
  <script src="js/events.js"></script>

</html>

ボタンに直接、onclick という属性を追加します。プロパティ値は、changeText() という名前で作成した関数になります。

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <button onclick="changeText()">Click me</button>
    <p>Try to change me.</p>
  </body>
  <script src="js/events.js"></script>

</html>

events.js ファイルを作成しましょう。このファイルは、ここの js/ ディレクトリにあります。その中で、p 要素の textContent を変更する changeText() 関数を作成します。

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

    p.textContent = "I changed because of an inline event handler.";
}

初めて events.html をロードすると、次のようなページが表示されます:

ただし、自分または別のユーザーがクリックすると、ボタンをクリックすると、p タグのテキストが Try to change me からに変わります。インラインイベントハンドラーのため変更しました。

JavaScript のイベントを深く理解する

インラインイベントハンドラーは、イベントを理解するための簡単な方法ですが、通常はテストや教育目的以外には使用しないでください。

JavaScript のイベントを深く理解するインラインイベントハンドラーを HTML 要素のインライン CSS スタイルと比較できます。個別のクラススタイルシートを維持することは、各要素にインラインスタイルを作成するよりも実用的です。これは、各要素にハンドラーを追加するのではなく、個別のスクリプトファイルを通じて完全に処理される JavaScript を維持するのと同様です。

イベントハンドラーのプロパティ

イベントハンドラーのインライン化の次の手順は、イベントハンドラーのプロパティです。これはインラインハンドラーに非常に似ていますが、要素の属性を HTML ではなく JavaScript で設定する点が異なります。

ここでの設定は同じですが、onclick="changeText()":

… < body >

<button > Click me < /button>

    <p>I will change.</p >

</body>
…/

関数も同様に残ります。次に、JavaScript でボタン要素にアクセスする必要があります。 style、id、その他の要素属性にアクセスするのと同じように、onclick に簡単にアクセスして、関数参照を割り当てることができます。

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

    p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector(&#39;button&#39;);
button.onclick = changeText;

注: イベントハンドラーは、ほとんどの JavaScript コードが従うキャメルケース規則に従いません。コードは onclick ではなく onclick であることに注意してください。

初めて Web ページを読み込むと、ブラウザに次の内容が表示されます。

このボタンをクリックすると、同様の効果が得られます。 :

JavaScript のイベントを深く理解する

#関数参照を onclick 属性に渡すとき、括弧は含めないことに注意してください。これは、その時点では関数を呼び出しているのではなく、関数を渡しているだけであるためです。引用。

事件处理程序属性的可维护性略好于内联处理程序，但它仍然存在一些相同的障碍。例如，尝试设置多个单独的onclick属性将导致覆盖除最后一个外的所有属性，如下所示。

const p = document.querySelector(&#39;p&#39;);
const button = document.querySelector(&#39;button&#39;);

const changeText = () = >{
    p.textContent = "Will I change?";
}

const alertText = () = >{
    alert(&#39;Will I alert?&#39;);
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

在上面的例子中，单击按钮只会显示一个警告，而不会更改p文本，因为alert()代码是最后添加到属性的代码。

JavaScript のイベントを深く理解する

了解了内联事件处理程序和事件处理程序属性之后，让我们转向事件侦听器。

事件监听器

JavaScript事件处理程序的最新添加是事件侦听器。事件侦听器监视元素上的事件。我们将使用addEventListener()方法侦听事件，而不是直接将事件分配给元素上的属性。

addEventListener()接受两个强制参数——要侦听的事件和侦听器回调函数。

事件监听器的HTML与前面的示例相同。

… < button > Click me < /button>

    <p>I will change.</p > …

我们仍然将使用与以前相同的changeText()函数。我们将把addEventListener()方法附加到按钮上。

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

    p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector(&#39;button&#39;);
button.addEventListener(&#39;click&#39;, changeText);

注意，对于前两个方法，click事件被称为onclick，但是对于事件监听器，它被称为click。每个事件监听器都会从单词中删除这个词。在下一节中，我们将查看更多其他类型事件的示例。

当您用上面的JavaScript代码重新加载页面时，您将收到以下输出:

JavaScript のイベントを深く理解する

初看起来，事件监听器看起来与事件处理程序属性非常相似，但它们有一些优点。我们可以在同一个元素上设置多个事件侦听器，如下例所示。

const p = document.querySelector(&#39;p&#39;);
const button = document.querySelector(&#39;button&#39;);

const changeText = () = >{
    p.textContent = "Will I change?";
}

const alertText = () = >{
    alert(&#39;Will I alert?&#39;);
}

// Multiple listeners can be added to the same event and element
button.addEventListener(&#39;click&#39;, changeText);
button.addEventListener(&#39;click&#39;, alertText);

在本例中，这两个事件都将触发，一旦单击退出警告，就向用户提供一个警告和修改后的文本。

通常，将使用匿名函数而不是事件侦听器上的函数引用。匿名函数是没有命名的函数。

// An anonymous function on an event listener
button.addEventListener(&#39;click&#39;, () = >{
    p.textContent = "Will I change?";
});

还可以使用removeEventListener()函数从元素中删除一个或所有事件。

// Remove alert function from button element
button.removeEventListener(&#39;click&#39;, alertText);

此外，您可以在文档和窗口对象上使用addEventListener()。

事件监听器是当前在JavaScript中处理事件的最常见和首选的方法。

常见的事件

我们已经了解了使用click事件的内联事件处理程序、事件处理程序属性和事件侦听器，但是JavaScript中还有更多的事件。下面我们将讨论一些最常见的事件。

鼠标事件

鼠标事件是最常用的事件之一。它们指的是涉及单击鼠标上的按钮或悬停并移动鼠标指针的事件。这些事件还对应于触摸设备上的等效操作。

事件	描述
click	当鼠标被按下并释放到元素上时触发
dblclick	当元素被单击两次时触发
mouseenter	当指针进入元素时触发
mouseleave	当指针离开一个元素时触发
mousemove	每当指针在元素中移动时触发

Click は複合イベントであり、マウスダウンイベントとマウスアップイベントの組み合わせで構成され、マウスボタンが押されるか上げられるとそれぞれトリガーされます。

mouseenter と Mouseleave を同時に使用して、マウスポインターが要素上にある限り持続するホバー効果を作成します。

フォームイベント

フォームイベントは、どの入力要素が選択されているか選択解除されているか、どのフォームが送信されているかなど、フォーム関連のアクションです。

#EventDescription##submitfocusblur#マウスをクリックするか、TAB キーを使用して要素に移動することによって要素が選択されると、フォーカスが達成されます。


フォームの送信時に発生します
要素 (入力など) がフォーカスを受け取ったときに発生します
要素のタイミングフォーカスが失われたときにトリガーされます

JavaScript は、フォームを送信したり、バックエンド言語に値を送信したりするためによく使用されます。 JavaScript を使用してフォームを送信する利点は、フォームの送信にページをリロードする必要がないこと、および必須の入力フィールドを JavaScript を使用して検証できることです。

キーボードイベント

キーボードイベントは、キーを押す、キーを上げる、キーを押し続けるなどのキーボード操作を処理するために使用されます。

#イベント説明キーが押されると、キーを放したときに 1 回トリガー押したときに連続的にトリガーFire キー見た目は似ていますが、keydown イベントと keypress イベントは、まったく同じキーすべてにアクセスするわけではありません。 keydown は押された各キーを認識しますが、keypress は SHIFT、ALT、DELETE などの文字を生成しないキーを省略します。キーボードイベントには、個々のキーにアクセスするための特定のプロパティがあります。

	##keydown
	keyup
	keypress

イベントオブジェクトと呼ばれるパラメータをイベントリスナーに渡すと、発生したアクションに関する詳細情報にアクセスできます。キーボードオブジェクトに関連する 3 つのプロパティには、keyCode、key、code が含まれます。

たとえば、ユーザーがキーボードの文字キーを押すと、そのキーに関連する次のプロパティが表示されます:

プロパティDescriptionキーに関連付けられた番号。はキャラクター名 ##押された物理キーを示しますKeyA

为了展示如何通过JavaScript控制台收集这些信息，我们可以编写以下代码行。

// Test the keyCode, key, and code properties
document.addEventListener(&#39;keydown&#39;, event = >{
    console.log(&#39;key: &#39; + event.keyCode);
    console.log(&#39;key: &#39; + event.key);
    console.log(&#39;code: &#39; + event.code);
});

一旦在控制台上按下ENTER键，现在就可以按键盘上的键了，在本例中，我们将按a。

输出：

keyCode: 65
key: a
code: KeyA

keyCode属性是一个与已按下的键相关的数字。key属性是字符的名称，它可以更改——例如，用SHIFT键按下a将导致键为a。code属性表示键盘上的物理键。

注意，keyCode正在被废弃，最好在新项目中使用代码。

事件对象

该Event对象由所有事件都可以访问的属性和方法组成。除了通用Event对象之外，每种类型的事件都有自己的扩展名，例如KeyboardEvent和MouseEvent。

该Event对象作为参数传递给侦听器函数。它通常写成event或e。我们可以访问事件的code属性keydown来复制PC游戏的键盘控件。

要试用它，请使用

标记创建基本HTML文件并将其加载到浏览器中。

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <p>
    </p>
  </body>

</html>

然后，在浏览器的开发者控制台中键入以下JavaScript代码。

// Pass an event through to a listener
document.addEventListener(&#39;keydown&#39;, event = >{
    var element = document.querySelector(&#39;p&#39;);

    // Set variables for keydown codes
    var a = &#39;KeyA&#39;;
    var s = &#39;KeyS&#39;;
    var d = &#39;KeyD&#39;;
    var w = &#39;KeyW&#39;;

    // Set a direction for each code
    switch (event.code) {
    case a:
        element.textContent = &#39;Left&#39;;
        break;
    case s:
        element.textContent = &#39;Down&#39;;
        break;
    case d:
        element.textContent = &#39;Right&#39;;
        break;
    case w:
        element.textContent = &#39;Up&#39;;
        break;
    }
});

当您按下一个键- ，a，s，d或者w-你会看到类似以下的输出：

JavaScript のイベントを深く理解する

从这里开始，您可以继续开发浏览器的响应方式以及按下这些键的用户，并可以创建更加动态的网站。

接下来，我们将介绍一个最常用的事件属性：target属性。在下面的示例中，我们div在一个内部有三个元素section。

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <section>
      <div id="one">One</div>
      <div id="two">Two</div>
      <div id="three">Three</div></section>
  </body>

</html>

使用事件。在浏览器的开发人员控制台中，我们可以将一个事件侦听器放在外部section元素上，并获得嵌套最深的元素。

const section = document.querySelector(&#39;section&#39;);

// Print the selected target
section.addEventListener(&#39;click&#39;, event = >{
    console.log(event.target);
});

单击其中任何一个元素都将使用event.target将相关特定元素的输出返回到控制台。这非常有用，因为它允许您只放置一个事件侦听器，该侦听器可用于访问许多嵌套元素。

JavaScript のイベントを深く理解する

使用Event对象，我们可以设置与所有事件相关的响应，包括通用事件和更具体的扩展。

结论

事件是在网站上发生的操作，例如单击，悬停，提交表单，加载页面或按键盘上的键。当我们能够让网站响应用户所采取的操作时，JavaScript就变得真正具有互动性和动态性。

更多编程相关知识，请访问：编程入门！！

Example		keyCode
65		key
a		code# を表します

以上がJavaScript のイベントを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はdigitaloceanで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles