예제

• 이벤트 (yalco.kr)

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

addEventListener

• 첫 번째 인자로 주어진 이벤트에, 두 번째 인자로 주어진 메서드의 동작을 부여
  • 콜백함수라 부름

// 마우스 클릭 이벤트
myButton.addEventListener('click', function () {
	console.log('클릭');
});

const logMouseEnter = () => { console.log('진입'); };
const logMouseLeave = () => { console.log('이탈'); };

// 마우스 진입/이탈 이벤트
myButton.addEventListener('mouseenter', logMouseEnter);
myButton.addEventListener('mouseleave', logMouseLeave);

이벤트 객체

• addEventListener 의 콜백함수의 인자에 매개변수로 포함
  • 해당 이벤트에 대한 상세정보 포함

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

clickPosition.addEventListener('click', function (e) {
	console.log(e);
});

// 하나의 이벤트에 여러 콜백함수 등록 가능
clickPosition.addEventListener('click', function (e) {
	let text = 'x: ';
	text += e.clientX;
	text += ', y: ';
	text += e.clientY;
	clickPosition.textContent = text;
});