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

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

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

• ページの読み込みが完了しました

• ユーザーがボタンをクリックしました

##ユーザーがドロップダウン リストの上にマウスを移動します
ユーザーがフォームを送信

• ##ユーザーがキーボードのキーを押す

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

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

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

• イベント リスナー

• # これら 3 つの方法を詳しく説明して、イベントをトリガーする各方法をよく理解してから、説明します。各方法の詳細、長所と短所。

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

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

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

  
  
    

  
  
    
    Click me
    
Try to change me.
  
  
  

  
  
    

  
  
    Click me
    
Try to change me.
  
  

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

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

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

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

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

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

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

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

… < body >

 Click me < /button>

    
I will change.


…/

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

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

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

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

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

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

const p = document.querySelector('p');
const button = document.querySelector('button');

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

const alertText = () = >{
    alert('Will I alert?');
}

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

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

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

事件监听器

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

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

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

… < button > Click me < /button>

    
I will change.
 …

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

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

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

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

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

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

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

const p = document.querySelector('p');
const button = document.querySelector('button');

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

const alertText = () = >{
    alert('Will I alert?');
}

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

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

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

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

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

// Remove alert function from button element
button.removeEventListener('click', alertText);

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

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

常见的事件

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

鼠标事件

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

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

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

フォーム イベント

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

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

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

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

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

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

// Test the keyCode, key, and code properties
document.addEventListener('keydown', event = >{
    console.log('key: ' + event.keyCode);
    console.log('key: ' + event.key);
    console.log('code: ' + 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文件并将其加载到浏览器中。

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

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

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

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

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

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

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

  
  
    

  
  
    

      
One
      
Two
      
Three
  

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

const section = document.querySelector('section');

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

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

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

结论

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

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

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