JavaScript でのイベント監視について簡単に説明します

WBOY
リリース: 2022-06-23 11:59:56
転載
2312 人が閲覧しました

この記事では、javascript に関する関連知識を提供します。主に、イベント監視とは何か、イベント監視の設定方法など、イベント監視に関連する問題を次のように整理しています。皆様のお役に立てれば幸いです。

JavaScript でのイベント監視について簡単に説明します

[関連する推奨事項: JavaScript ビデオ チュートリアル Web フロントエンド ]

「イベント」とは

DOM を使用すると、HTML 要素がイベント ;

Event: ユーザーとユーザーの間の対話に反応するように JS コードを作成できます。 Web ページ;例: Web ページをクリックします;

監視: このイベントが発生したことをコンピュータ がいつでも検出できるようにするためです。プログラマが事前に作成したプログラムを実行する;

イベント リスニングを設定するには、主に 2 つの方法があります:

onxxx と addEventListener();

最も簡単な方法イベント リスニングのセットアップ

onxxx プロパティの設定;

oBox.onclick = function () {
    // 点击盒子时,将执行这里的语句
}
ログイン後にコピー
共通マウス イベント モニタリング

イベント名イベントの説明onclickマウスがオブジェクトをシングルクリックしたとき#ondblclickonmousedownonmouseuponmousemove#onmouseenterマウスがオブジェクトに入ったとき (同様のイベント onmouseover) onmouseleaveマウスがオブジェクトから離れたとき (同様のイベント onmouseover) イベント onmouseout) 一般的なキーボード イベント モニタリング
マウスでオブジェクトをダブルクリックしたとき
オブジェクト上でマウス ボタンを押したとき
When オブジェクト上でマウス ボタンが放されたとき
マウス ボタンが移動されたときオブジェクト

Event名前イベントの説明onkeypressキーボードのキー (矢印キーやファンクション キーなどのシステム ボタン) が押されたときは認識されません)onkeydownキーボードのキーが押されたとき (システム ボタンは認識され、onkeypress の前に発生します) キーボードのキーが離されたとき共通フォームイベント監視
##onkeyup

イベント名イベントの説明onchange要素がフォーカスを取得したとき (タブ キーやマウスのクリックなど)要素がフォーカスを失ったとき##onsubmitフォームが送信されたときonresetフォームリセット時
ユーザーがフォームのコンテンツを変更したときフィールドは、

onfocus
#onblur のときにトリガーされます。
共通ページイベント監視

イベント名

イベントの説明onloadページまたは画像の読み込みが完了したときonunloadユーザーがページを終了するとき最初に外側から内側へ
イベントの伝播

(キャプチャフェーズ)

そして、内側から外側へ (バブリングステージ) そして、onxxx は次のように記述されます (DOM)レベル 0)、バブリング段階のみを監視できます

; したがって、addEventListener() メソッドを使用する必要があります (DOM2 レベル);

oBox1.addEventListener('click', function(){
    // 这是事件处理函数
}, true)  // true表示监听捕获阶段,false表示监听冒泡阶段
ログイン後にコピー
#Notes

内部要素は、キャプチャ ステージとバブリング ステージを区別しなくなりました。. 前に書かれたリスナーが最初に実行され、次に後から記述されたモニターが実行されます。

  • 同じ要素に同じ名前の同じイベントを 2 つ以上設定した場合、DOM レベル 0 の記述方法 #後で書かれたものは最初に書かれたものを上書きし、DOM レベル 2 は順番に書き込まれます。 ウェブ フロントエンド]

以上がJavaScript でのイベント監視について簡単に説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート