javascript - Event(2)

codeitで勉強した内容を整理しました.
中級のテーマは終わりました...気分が悪い
正解を見ないと解けない.放せ.
中級課程はもう一度聞かなければならない.

マウスイベント

buttonはmouseEventのプロパティです.

const flagBlue = document.querySelector('.flag-blue');
const flagWhite = document.querySelector('.flag-white');

function flagUp(e) {
  // 여기에 코드를 작성해 주세요.
  if (e.button === 0){ // 0: 왼쪽 버튼
    flagBlue.classList.add('up');
    // e.target.classList.add('up');
  } else if (e.button === 2){ // 2: 오른쪽 버튼
    flagWhite.classList.add('up');
  }

document.addEventListener('mousedown', flagUp);

マウス移動イベント

MouseEvent.type

mousemove:マウスポインタが移動すると

MouseEvent.clientX, clientY
-画面に表示されるウィンドウのマウスポインタの位置

イベント発生時にブラウザがコンテンツを表示できる領域

MouseEvent.pageX, pageY:
-Webドキュメント全体のマウスポインタの位置

は

を含み、画面上の見えない領域にスクロール可能である

MouseEvent.offsetX, offsetY:
-イベントが発生したターゲットに基づいて
-イベント発生要素に基づくマウスポインタ位置

mouseover:マウスポインタが要素から移動すると

mouseout:マウスポインタが要素から移動すると

以下のアクティビティタイプでは泡現象は発生しません.

マウスポインタ:マウスポインタが要素の外部から要素の内部に入ると、

mouseleave:マウスポインタが要素から外側にある場合、

最大の違いは
mouseover/museoutのイベントハンドラは、サブ要素にも影響します.(泡発生)
mouseenter/mouseleaveのイベントハンドラはサブ要素に影響しません.(発泡x)

const box2 = document.querySelecotr('#box2');

function onMouse(){
	console.log('mouse is moving');
}

box1.addEventListener('mousemove', onMouseMove);

function onMouseMove(e) {
  console.log(`client: (${e.clientX}, ${e.clientY})`);
  console.log(`page: (${e.pageX}, ${e.pageY})`);
  console.log(`offset: (${e.offsetX}, ${e.offsetY})`);
  console.log('------------------------------------');
}

box2.addEventListener('mouseover', printEventData);

キーボードイベント

KeyboardEvent.type
-キーストローク:キーボードボタンを押した瞬間

キー:キーボードボタンを押すと瞬間

キー:キーボードボタンを押す
イベントは、

の出力値が変化した場合にのみ発生します.

機能性ロールは、具体的な値x

である.

を複数回クリックすると、

が1回のみ発生します.

はお勧めしない方法です!

KeyboradEvent.key
-イベント発生ボタンの値

KeyboradEvent.code
-キーの物理的な位置

元のtextareaラベルにカーソルを置き、enterキーを押して改行します.ブラウザの基本動作だそうです.△いいえ、この部分を初めて勉強した人はどうして知っていますか.

Inputラベルの処理

inputラベルには様々なタイプがあります

type='text'

type='password'

type='button'

tyoe='checkbox'

フォーカスイベント

focusin:要素に焦点を当てるとき

focusout:フォーカスが要素から離れると

フォーカス:要素にフォーカスした場合(Bubling x)

blur:フォーカスが要素から離れるとき(Bubling x)

入力イベント

input:ユーザ入力時

変化:要素の値が変化すると

もう一度覚えて

JavaScriptをHTMLタグの非標準属性として使用する場合、HTMLタグにdata-*として記述すると、DOMのdata propertyを利用してアクセスできます.

// example 예제
// 비표준 속성 태그 값이 data-title 인 경우
function func(e){
	if(e.target.dataset.title){
    	console.log('비표준 속성 태그');
    }
}