마우스 이벤트

📖 마우스 이벤트

마우스로 특정 element 접근 시 발생하는 이벤트

종류

click

마우스로 특정 요소 클릭 시 발생

h1.addEventListener('click', () => {
    alert('click!');
})

mouseenter

마우스를 element 바깥에서 안으로 옮겼을 때 발생

function handleMouseEnter() {
    h1.innerText = 'mouseenter!';
}

h1.addEventListener('mouseenter', handleMouseEnter);

이벤트 발생 이전

이벤트 발생 이후

mouseleave

마우스를 element 안에서 바깥으로 옮겼을 때 발생

function handleMouseLeave() {
    h1.innerText = 'mouseleave';
}

h1.addEventListener('mouseleave', handleMouseLeave);

이벤트 발생 이전

이벤트 발생 이후

contextmenu

• element를 우클릭 시 발생
• 이벤트 핸들러 및 preventDefault()를 활용해 우클릭 이벤트 발생을 방지할 수 있다.

function handleRightClick() {
    alert('RIGHTCLICK');
}

h1.addEventListener('contextmenu', handleRightClick);

이벤트 종류에 대해 전부 정리하지는 못했기 때문에 신규로 사용해보는 이벤트는 따로 정리하도록 하자