TIL 210721

5765 ワード
TIL JavaScript DOM テキストリンク

学習の内容


キムバーグのYouTube講座
DOMイベントフロー。
2つの必須DOMアクティビティの対象方法(面接時にも蒲団)

必須DOMイベント


event handler


イベントハンドラ=イベントリスナー=イベントコールバック関数
イベント発生時に実行する関数
  • addEventListener()最も一般的なイベント
    →イベントの正確な制御(複数の関数接続など)

    • よく使用されるDOMイベントタイプ


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

  • 負荷リソースのロードが完了すると、
    • が実行されます.
  • ビューまたは要素をスクロールするときに発生する
    • ドキュメントビューを変更する時間は
  • です.

    フォーカスイベント

  • blur要素のフォーカス解除時に発生する
  • 焦点要素が焦点を得るときに発生する

    • Formイベント

  • <input>, <select>, <textarea>の値を変更するときに発生する
  • submitフォームの送信時に発生する

    • マウスイベント

  • click要素でマウスポインタをクリックすると発生する
    • 要素上でマウスポインタ
  • をクリックしたときに発生する
  • マウスポインタが要素とサブ要素の境界から離れるときに発生する
  • mouseup要素でマウスポインタボタンを焼くと
    • が発生する.

    Keyboardイベント


    初めてキーボードを押した時に
  • キーが発生しました
  • のキーストローク文字値を励起キーを初めて押すと
    • が励起される.
    鍵の解放
  • で発生
    ->常に続くキーとキーイベント

    • DOMイベントフロー


    divをクリックしたときの出来事



    html、bobyタグにも同じclickイベントハンドラがある場合は、divをクリックしてすべてのイベントを実行します.
  • currentTargetイベントリスナーが登録されている要素
    • を返す.
  • ターゲットイベントの開始点
    • を返します.
    =>イベントに実行順序があるイベントフロー.

    イベントフロー


  • キャプチャフェーズは最上位レベルから始まり、
  • ターゲットフェーズイベントを開始する理由は
    • です.
  • Bubbleフェーズイベントが再びオンラインになった
    • =>イベントが繰り返し実行される場合があります

    Capture vs Bubble



    currentTargetとtargetが一致しない場合は、イベントフローフェーズのどのフェーズでイベントが実行されるかを選択できます.
  • デフォルト値はBubble(false)
    • です.
  • capture target.addEventListener(type, listener[,useCapture]); (true)

    • e.stopPropagation()


    次回実行するイベントをブロック
  • ブラウザ基本動作capture→target→bubbleプロシージャは
    • を阻止できません.

    に質問



    stopPropagationをbodyに適用した場合、divは真のイベントのターゲットとして実行されません.

    e.preventDefault()


    イベントのキャプチャとバッファリングを阻止せずに、デフォルト定義のイベントを開始しません.
  • stopPropagationデフォルトイベント
    • はキャンセルされません.
    例)
    <body>
	<form action="">
		<input type="text"/>
		<button type="button">제출</button>
	</form>
</body>

<script>
	const form = document.querySelector('form')
	form.addEventListener('submit', (e) => {
		e.preventDefault();
	});
</script>
    基本ロジックは、submitタイプのボタンを押して、フォームタグのaction属性に入力した位置に移動します.
  • 提出前に、ユーザーが適切な値を記入した場合、submitを送信したい
    →PreventDefault
    • を適用
    [プログラマー]ランキング
    REACT 1