JavaScript 2イベントハンドラの登録

1533 ワード
テキストリンク

勘定科目の勘定科目イベントの登録

// 이벤트 등록하기
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(event,handler):イベントハンドラを登録する際に最も推奨される方法。


イベントタイプ文字列に最初のパラメータを渡し、イベントハンドルを2番目のパラメータで渡します.
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);
//하나의 요소에 여러개의 독립적인 이벤트 핸들러를 등록할 수 있다.

✔️elem.removeEventListener(event,handler):イベントハンドラが削除されました。


event 2は登録後に削除されるのでevent 1のみ実行されます.
❗️登録時に使用しなければならないハンドル.竹.転送する必要があります.イベントハンドラを削除する必要がある場合は、イベントの登録時に外部に関数を作成し、その関数の名前にハンドラを渡す必要があります.
また、転送ハンドラの部分ですぐに関数を作成することもできますが、イベント1()がこのように作成されると、それらの外観は同じですが、それらは異なる関数なので、イベントハンドラは正常に削除されません.
btn.removeEventListener('click', event2);

✔イベント対象

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

                    //event대신에 알파벳 e만 쓰기도 함.
function printEvent(event) {  //이벤트 핸들러가 되는 함수의 첫번째 파라미터는 무조건 이벤트 객체가 전달.
  console.log(event);
	event.target.style.color = 'red';//문자열 전부 빨간색
}

myInput.addEventListener('keydown', printEvent);
myBtn.addEventListener('click', printEvent);
easyUi---treeバックグラウンド動的生成json文字列形成メニューツリー
[伯俊]10872号