Java Event
.addEventListener()
= 대상에 이벤트 청취(Listen)를 등록합니다.
= 대상에 지정한 이벤트가 발생했을 때 지정한 함수가 호출됩니다.
ex)
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
parentEl.addEventListener('click', () => {
console.log('Parent!')
})
childEl.addEventListener('click', () => {
console.log('Child!')
})
.removeEventListener()
= 대상에 등록했던 이벤트 청취를 제거합니다.
= 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수 있습니다.
ex)
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const handler = () => {
console.log('Parent!')
}
parentEl.addEventListener('click', handler)
childEl.addEventListener('click', () => {
parentEl.removeEventListener('click',handler)
})
이벤트 객체
= 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있습니다.
ex)
const parentEl = document.querySelector('.parent')
parentEl.addEventListener('click', event => {
console.log(event.target, event.currentTarget)
})
parentEl.addEventListener('wheel', event => {
console.log(event)
})
기본 동작 방지
.preventDefault()
- 마우스 휠의 스크롤 동작 방지
const parentEl = document.querySelector('.parent')
parentEl.addEventListener('wheel', event => {
event.preventDefault()
console.log('Wheel!')
})- a태그에서 페이지 이동 방지!
const anchorEl = document.querySelector('a')
anchorEl.addEventListener('click', event => {
event.preventDefault()
console.log('Click!')
})이벤트 전파(버블) 정지
=작은 범위에서 더 넓은 범위로 이벤트가 점점 넓어지는 현상을 버블링이라 합니다.
= 이러한 현상을 막기 위해 사용되는 메소드가 버블링 정지 메소드입니다.
event.stopPropagetion()
const parentEl = document.querySelector(".parent");
const childEl = document.querySelector(".child");
const anchorEl = document.querySelector("a");
window.addEventListener("click", (event) => {
console.log("Window!");
});
document.addEventListener("click", (event) => {
console.log("Body !");
}, { capture: true }); // 핸들러 먼저 동작하게
parentEl.addEventListener("click", (event) => {
console.log("Parent!");
//event.stopPropagation() // 버블링 정지
});
childEl.addEventListener("click", (event) => {
console.log("CHild!");
});
anchorEl.addEventListener("click", (event) => {
console.log("Anchor!");
});
이벤트 옵션
once:불린타입
= 핸들러 true라면 한 번만 실행한다.
ex)
const parentEl = document.querySelector('.parent')
parentEl.addEventListener('click', event => {
console.log('Parent!')
}, {
once: true
})
passive: 불린타입
= 기본 동작과 핸들러 실행을 분리한다.
= 휠동작은 기본동작 / 10000개를 출력하는 것은 핸들러실행이므로 둘을 분리하여 렉이 걸리지 않고 느려지지 않는다.
ex)
const parentEl = document.querySelector('.parent')
parentEl.addEventListener('wheel', () => {
for (let i = 0; i< 10000; i +=1 ) {
console.log(i)
}
}, {
passive: true
})
