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 までご連絡ください。

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。