javascript - Event(2)

10577 ワード
JavaScript テキストリンク
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('비표준 속성 태그');
    }
}
    [BOJ]19237-大人のサメ
    Linuxの下でVIMエディタのコードに対して折り畳んでscreenと使用します