Javascript(イベントオブジェクト、イベント励起オブジェクト、デフォルトイベント)
1751 ワード
呑呑呑Javascript(イベントオブジェクト、イベント励起オブジェクト、デフォルトイベント)
📕キーボードイベント
keydown-はキーを押したときに実行します.キーボードを押しても入力しても動作します
keypress-キー入力時に実行
keyup-キーボードのキーダウン時に実行
keypressはあまり使いにくいです.Webブラウザに基づいてアジア地域の文字を正しく処理できないという問題があります.
キーを押してキー出力を離す
📗イベントオブジェクト
イベントが発生すると、イベントオブジェクトはイベントコールバック関数の最初のパラメータに渡されます.
イベントオブジェクトにあります.「世界新聞」を撮れば、イベントに関する様々な情報が得られます
たとえば、キーボードイベントが発生した場合、イベントオブジェクトを
どのキーを押したかなど、関連するプロパティがあります.
code-入力鍵
keycode-は入力したキーの数字を表します.
AltKeyAltキーを押したかどうか
ctrlKey-ctilキーを押したかどうか
ShiftKey Shiftキーを押したかどうか
例
入力ボックスに文字を入力すると、いくつかの文字が入力されていることがわかります
📘イベントオカレンスオブジェクト
トリガーイベントを表すオブジェクト
上記の例ではtextareaはイベント発生のオブジェクトである
イベントハンドラでイベントオカレンスオブジェクトを作成する場合.
他の方法で書くこともできます
📙デフォルトのイベント
何かを使うときに、基本的に起こるイベントを意味します.
このような基本的な活動を阻止し、利用する必要がある場合がある.
例えば、ブログなどで画像が不正にコピーされないように、
マウスの右クリックの防止など
方法はpreventDefault()を使用することです.
本来、リンクをクリックするときはブログを閲覧する必要があります.
preventDefaultを使用しているので移動できません
📕キーボードイベント
keydown-はキーを押したときに実行します.キーボードを押しても入力しても動作します
keypress-キー入力時に実行
keyup-キーボードのキーダウン時に実行
keypressはあまり使いにくいです.Webブラウザに基づいてアジア地域の文字を正しく処理できないという問題があります.
キーを押してキー出力を離す
📗イベントオブジェクト
イベントが発生すると、イベントオブジェクトはイベントコールバック関数の最初のパラメータに渡されます.
イベントオブジェクトにあります.「世界新聞」を撮れば、イベントに関する様々な情報が得られます
たとえば、キーボードイベントが発生した場合、イベントオブジェクトを
どのキーを押したかなど、関連するプロパティがあります.
code-入力鍵
keycode-は入力したキーの数字を表します.
AltKeyAltキーを押したかどうか
ctrlKey-ctilキーを押したかどうか
ShiftKey Shiftキーを押したかどうか
例
入力ボックスに文字を入力すると、いくつかの文字が入力されていることがわかります
📘イベントオカレンスオブジェクト
トリガーイベントを表すオブジェクト
上記の例ではtextareaはイベント発生のオブジェクトである
イベントハンドラでイベントオカレンスオブジェクトを作成する場合.
他の方法で書くこともできます
textarea.addEventListener('keyup', () => {
h1.textContent= `글자 수 : ${textarea.value.length}`
})
textarea.addEventListener('keyup', (event) => {
h1.textContent= `글자 수 : ${event.currentTarget.value.length}`
})
textarea.addEventListener('keyup', function () {
h1.textContent= `글자 수 : ${this.value.length}`
})
3つの意味は同じです📙デフォルトのイベント
何かを使うときに、基本的に起こるイベントを意味します.
このような基本的な活動を阻止し、利用する必要がある場合がある.
例えば、ブログなどで画像が不正にコピーされないように、
マウスの右クリックの防止など
方法はpreventDefault()を使用することです.
本来、リンクをクリックするときはブログを閲覧する必要があります.
preventDefaultを使用しているので移動できません
Reference
この問題について(Javascript(イベントオブジェクト、イベント励起オブジェクト、デフォルトイベント)), 我々は、より多くの情報をここで見つけました https://velog.io/@qnrl3442/Javascript-이벤트-객체テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol