目次
インターフェイス イベント
マウス イベント
フォーム イベント
W3C イベント
Microsoft イベント
Mozilla イベント
イベント ハンドラー
続行
ホームページ ウェブフロントエンド jsチュートリアル JavaScript イベント学習 第 2 章 イベント ブラウザの互換性_JavaScript スキル

JavaScript イベント学習 第 2 章 イベント ブラウザの互換性_JavaScript スキル

May 16, 2016 pm 06:35 PM
event 互換性 ブラウザ

ここで紹介するイベントには、特定の HTML 要素で発生した場合にほとんどのブラウザで認識される名前が付けられています。つまり、ブラウザはこの HTML 要素に登録したイベント ハンドラー スクリプトを検索し、すぐに実行されます。
最初はイベントが少ないです。これらのイベントは、非常に古いブラウザであっても、ほぼすべての JavaScript ブラウザで機能します。これらの初期のイベントはリンクまたはフォームでのみ機能し、場合によってはウィンドウ全体で機能しますが、他のほとんどの HTML 要素では機能しないことに注意してください。
時代は変わり、多くの新しい出来事が皆さんに紹介されました。第 4 世代以降のブラウザでは、任意の HTML 要素にイベントを登録できます。
したがって、基本的に任意の要素に任意のイベントをバインドできますが、

にキーダウンをバインドすることはあまり意味がありません。
完全なブラウザ イベント互換性リストは、こちらをご覧ください。

インターフェイス イベント

インターフェイス イベントは、ユーザーのアクションによってトリガーされるのではなく、ユーザーのアクションの結果によってトリガーされます。
ユーザーがいずれかの要素をクリックすると、クリック時間がトリガーされます。特別な意味を持つ要素をクリックすると、追加のインターフェイス イベントがトリガーされます。
たとえば、ユーザーがリンクをクリックすると、クリック時間がトリガーされます。このリンクをクリックすると、新しいページがロードされるため、この特別なクリック イベントによってインターフェイス イベントのアンロードがトリガーされます。
他のインターフェイス イベントには、サイズ変更、スクロール、フォーカス/ぼかしなどがあります。

マウス イベント

Netscape 2 以降、すべてのブラウザはこれら 2 つの事実に気づきました。マウスがリンク領域に入ると、mouseover イベントがトリガーされます。このリンクをクリックすると、クリック イベントがトリガーされます。 Mouseout が追加された直後、マウスがリンク領域から離れるとトリガーされます。そこで、トラディショナルマウスイベントトライアド(トラディショナルトライアド)が設立されました。
第 3 世代のブラウザでは、マウス イベントがいくつか拡張されました。 dbclick が追加され、クリック イベントはマウスダウンとマウスアップに分割されます。ユーザーがマウス ボタンを押してポップアップします。最後に、マウスの軌跡を追跡するmousemove
も可能になりました
次の章では、マウスイベントについて詳しく説明します。

フォーム イベント

フォームは、ユーザーがフォームを送信すると送信イベントとリセット イベントがトリガーされ、フォームがリセットされるとリセットがトリガーされます。送信イベントは、すべてのフォーム検証コードの中核です。ユーザーがフォームを送信すると、フォームが走査されて間違ったデータがないかチェックされます。エラーが見つかった場合は、フォームの送信を中止し、ユーザーに警告を発します。
フォームは、アイテムがフォーカスを取得または失ったときのキーボード イベントやクリック イベントだけでなく、フォーカス イベントやブラー イベントも識別できます。追加の互換性リストを表示できます。
通常、これらのイベントを使用するときは注意してください。ユーザーがフォーム内の項目から離れたときに onblur を使用してデータを検証することは完全に可能ですが、これは多くの場合煩わしいものです。ユーザーは、フォームへの入力に忙しいときにポップアップ プロンプトを表示したくありません。

W3C イベント

W3C の DOM 2 イベント仕様 では、いくつかの Mutation イベントも定義されています。これらのイベントは、ドキュメントの DOM 構造が変更されるとトリガーされます。最も一般的なのは DOMSubtreeModified イベントで、DOM が変更されるとトリガーされます。
Mozilla は、このイベントを subtreemodified に設定します。 Mozilla は、ここで言及していない他の w3c イベントもサポートしていません。

Microsoft イベント

Microsoft は多くのイベントを作成しました。いくつかは非常に興味深いものです。
comtextmenu イベントは、ユーザーがマウスの右ボタンをクリックするといつでもトリガーされます。これは悪用するのに十分便利です。 Mozilla もこのイベントをサポートしています。
XML ファイルがインポートされると、readystatechange イベントは一部の読み込みイベントと同様に処理されます。 XMLドキュメントのreadyStateが4になると、ドキュメントがロードされます。 (readyState が何なのかは聞かないでください。機能するので十分です)
驚くべきことは、unload イベントが発生する前に beforeunload イベントがあることです。ページを閉じることをキャンセルするように設計されていましたが、誰も気にしませんでした。
最後に、Microsoft は、mouseover イベントと Mouseout イベントとほぼ同じである、mouseenter イベントと Mouseleave イベントも発明しました。マウスイベントの章を参照してください。
もちろん、上記のイベントは IE でのみサポートされます。

Mozilla イベント

Mozilla には、もちろん 独自のイベントも多数あります。まだ注意深く勉強していません。

イベント ハンドラー

すべてのイベントは、トリガーされるたびにブラウザーによって検出されます。ブラウザは通常、ユーザーがリンクをクリックしたときなど、デフォルトのプロシージャも実行します。しかし、何も起こらないこともあります。

イベント ハンドラーの重要な点は、他のことを実行できることです。イベントの発生時にブラウザにスクリプトを実行させることができます。このように書くと、イベントが発生するたびにスクリプトが実行されます。これらのスクリプトが論理的に役立つ場合、ユーザーは非常に満足するでしょう。

イベントがトリガーされたときにスクリプトを確実に実行できるようにするには、次のように HTML 要素の特定のアクションに対してイベントを登録する必要があります。


      这样脚本里的alert('I\'ve been clicked!')就会在click事件发生的时候执行。这就注册了一个事件处理程序。<br>
ログイン後にコピー

続行

学習を続けたい場合は、次の章をお読みください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Apple携帯電話用のOUYI Exchangeアプリの公式Webサイトをダウンロードする Apple携帯電話用のOUYI Exchangeアプリの公式Webサイトをダウンロードする Apr 28, 2025 pm 06:57 PM

OUYI Exchangeアプリは、Apple携帯電話のダウンロードをサポートし、公式Webサイトにアクセスし、「Apple Mobile」オプションをクリックして、App Storeに入手してインストールし、登録またはログインして暗号通貨取引を実施します。

セサミオープンドア公式ウェブサイトエントランスセサミオープンドア公式最新の入り口2025 セサミオープンドア公式ウェブサイトエントランスセサミオープンドア公式最新の入り口2025 Apr 28, 2025 pm 07:51 PM

Sesame Open Doorは、暗号通貨取引に焦点を当てたプラットフォームです。ユーザーは、公式ウェブサイトまたはソーシャルメディアを介してポータルを取得して、アクセス中にSSL証明書とWebサイトコンテンツの信頼性が検証されるようにすることができます。

OUYI公式ウェブサイトの入り口OUYI公式最新の入り口2025 OUYI公式ウェブサイトの入り口OUYI公式最新の入り口2025 Apr 28, 2025 pm 07:48 PM

OKEXなどの信頼できる取引プラットフォームを選択して、公式の入り口へのアクセスを確認してください。

Binanceの公式ウェブサイトEntrance Binance公式最新の入り口2025 Binanceの公式ウェブサイトEntrance Binance公式最新の入り口2025 Apr 28, 2025 pm 07:54 PM

Binanceの公式Webサイトにアクセスして、フィッシングWebサイトを避けるためにHTTPSとグリーンロックロゴを確認してください。公式アプリケーションにも安全にアクセスできます。

Binance Plazaはどの程度信頼できますか? Binance Plazaはどの程度信頼できますか? May 07, 2025 pm 07:18 PM

Binance Squareは、Binance Exchangeによって提供されるソーシャルメディアプラットフォームであり、暗号通貨に関連する情報を通信および共有するスペースをユーザーに提供することを目指しています。この記事では、このプラットフォームをよりよく理解するために、Binance Plazaの機能、信頼性、およびユーザーエクスペリエンスを詳細に調べます。

お使いの携帯電話でネイティブセレクトを使用する場合、どのような問題が発生しますか? お使いの携帯電話でネイティブセレクトを使用する場合、どのような問題が発生しますか? Apr 30, 2025 pm 03:06 PM

モバイルデバイスでアプリケーションを開発する際に携帯電話でネイティブセレクトの問題は、ユーザーが選択を行う必要があるシナリオに遭遇することがよくあります。ネイティブセル...

Laravelライブチャットアプリケーション:WebSocketとPusher Laravelライブチャットアプリケーション:WebSocketとPusher Apr 30, 2025 pm 02:33 PM

Laravelでライブチャットアプリケーションを構築するには、WebSocketとPusherを使用する必要があります。特定の手順には次のものが含まれます。1).envファイルでプッシャー情報を構成します。 2)broadcasting.phpファイルの放送ドライバーをプッシャーに設定します。 3)Pusherチャンネルを購読し、Laravelechoを使用してイベントを聴きます。 4)Pusher APIを介してメッセージを送信します。 5)プライベートチャネルとユーザー認証を実装します。 6)パフォーマンスの最適化とデバッグを実行します。

2025 Binance Binance Exchange最新のログインポータル 2025 Binance Binance Exchange最新のログインポータル May 07, 2025 pm 07:03 PM

世界をリードする暗号通貨交換として、Binanceは常にユーザーに安全で便利な取引体験を提供することに取り組んでいます。時間が経つにつれて、Binanceは、ユーザーの変化するニーズを満たすために、プラットフォーム機能とユーザーインターフェイスを継続的に最適化しました。 2025年、Binanceはユーザーエクスペリエンスをさらに向上させることを目的とした新しいログインポータルを開始しました。

See all articles