javascript - Event

codeitで整理した内容を勉強!
内容を勝手に持ち出して使ってはいけません.
塾から帰ったら仁康の话を闻き続けたい.少し疲れました.ううう
ご飯食べて休んで.1時間ほど遅れて勉強を始める.😭
進展が遅い.怠惰ではなく、内容がどんどん難しくなっていく!!

イベントハンドラの登録

clickイベントのほかに、マウスイベント/キーボードイベント/フォーカスイベント/入力イベント/スクロールイベント/ウィンドウイベントもあります.

removeEventListenerメソッドは、パラメータとして渡されるタイプおよびイベントハンドラがaddEventListenerメソッドとして登録されている場合と同じ場合にのみ、イベントハンドラを削除することができる

// DOM 에 접근하는 방법
let btn = document.querySelector('#myBtn');

btn.onclick = function(){
	console.log('Hi Codeit!');
}

// 이벤트 핸들러 등록하기
function event1(){
	console.log('Hi Codeit!');
}

function event2(){
	console.log('Hi again!');
}

// elem.addEventListener(even, handler)
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);

// elem.removeEventListener(ene, handler)
// 이벤트를 제거하기 위해서는 외부에서 함수를 작성해야한다.
btn.removeEventListener('click', event2);

// 이렇게 작성을 할 수 있지만 제거하기 위해서는 위에서 처럼 외부에서 함수를 작성해야한다.
btn.addEnventListener('click', function(){
	console.log('event3!;);
}
   
// 이렇게 작성하면 안 지워진다!! 의미 없는 코드가 된다.
btn.removeEventListener('click', function() {
  console.log('click!');
});

const btn = document.querySelector('#btn');

function printBtn() {
  console.log(btn.outerHTML);
}
  
btn.onclick = function() {
  console.log('click!');
};
btn.onclick = printBtn;	// 이렇게 사용하면 안된다!!!
btn.removeEventListener('click', printBtn); // 삭제 안됨 x

イベントオブジェクト

次は共同番組です!

type:イベント名(「click」,「mouseup」,「keydown」など)

target:イベント発生の要素

currentTarget:登録済みイベントハンドラの要素

timeStamp:イベント発生時間(ページロード後のミリ秒)

気泡:発泡段階にあるか否かを判断するための値

const myInput = document.querySelector('#myInput');
const myBtn = document.quertSelector('#myBtn');

function printEvent(event){
	console.log(event);
}

myInput.addEventListener('keydown', printEvent);
myBtn.addEventListener('click', printEvent);

イベントハンドラ例01

forとfor inが混同した

const toDoList = document.querySelector('#to-do-list');
const items = toDoList.children;

// 내가 작성한 부분
for (let i = 0; i < 3; i++){
  items[i].addEventListener('click', updateToDo);
}

// 모범 답안
for (let item of items) {
  item.addEventListener('click', updateToDo);
}

イベントバッファ

同じタイプの親要素から始まり、windowオブジェクトに到達するまでイベントが生成されません.

event bublingが発生するとイベントも発生します.targetは、最初に実行された部分を表します.

登録された要素にアクセスするイベントハンドラ.currentTargetにアクセスする必要があります.

e.stopPropagation();使用可停止泡

キャプチャ(キャプチャ)

取得手順:イベント要素が最上位ウィンドウオブジェクトからサブ要素に伝播する手順

キャプチャフェーズでイベントが発生することは非常にまれです.

通常、ターゲット登録のイベントハンドラが機能し、bundlingフェーズでは親要素登録のイベントハンドラが通常起動します.

// arrow function으로 함수 표현을 간략하게 바꾼 것이라고 한다.
 for (let elem of document.querySelectorAll('*')) {
      elem.addEventListener("click", e => alert(`캡쳐링 단계: ${elem.tagName}`), true);
      elem.addEventListener("click", e => alert(`버블링 단계: ${elem.tagName}`));
    }

アクティブなBubblingテスト

この部分はちょっと理解できないので書いてみました.

mainのイベントはまずコードで実行して出力すべきだと思います...
これがcurrentTargetメソッドのためか,まずサブ要素のイベントを出力する.
子ノード上のイベントがないため、子ノードをクリックすると、親ノードイベントが発生するイベントbubling現象が理解されます.しかし、なぜ子ノードで親ノードのイベントが発生するのでしょうか.何か見逃したような気がします.

const main = document.querySelector('#main');
const toDoList = main.lastElementChild;

function printCurrentTarget(event) {
  console.log(event.currentTarget);
}

main.addEventListener('click', printCurrentTarget);	// <= 먼저 이벤트가 발생하는데

for (let child of toDoList.children) {	// <= 이 친구들이 먼저 출력이된다.
  child.addEventListener('click', printCurrentTarget);
}

委任イベント

次の図に示すように、既存のリストはイベントが開始されたことを確認し、新しく追加されたリストはイベントが開始されていないことを確認します.

const list = document.querySelector('#list');

for (let item of list.children){
	item.addEventListener('click', function(e){
    	e.target.classList.toggle('done');
    }
}
                          
const li = document.createElement('li');
li.classList.add('item');
li.textContent = '일기쓰기';
list.append(li);

上記の問題を解決するには、親要素にイベントを処理させるだけで、サブノードごとにイベントを1つ提供するわけではありません.(委任と考えられる)

list.addEventListener('click', function(e){
	e.target.classList.toggle('done');
})

このような解決策も不安だ.子要素以外の親要素を選択してイベントハンドラを起動することもできます.下の図のようにif文を追加して作成すればいいです.

list.addEventListener('click', function(e){
	if (e.target.classList.contains('item'){
    	e.target.classList.toggle('done');
    }
}

ブラウザのデフォルトの動作

event.preventDefault():基本動作をブロックします.

ブラウザのデフォルトの動作をブロックする方法であるため、必要に応じてのみ使用されます.

const link = document.querySelector('#link');
const checkbox = document.querySelector('#checkbox');
const inputs = document.querySelector('#input');

// event.preventDefault
link.addEventListener('click', function(e){
	e.preventDefault();
  	alert('지금은 클릭 할 수 없습니다.');
}

inputs.addEventListener('keydown', funtion(e) {
	if (!checkbox.checked){
    	a.preventDefault();
      	alert('체크박스를 먼저 클릭해 주세요');
    }
})