[JS] 이벤트 발생 / 작동해지 - dispatchEvent( new Event()) / preventDefault()

See the Pen Untitled by Tae (@Tae54) on CodePen.

1. 이벤트 발생 : 이벤트타겟.dispatchEvent(new Event('이벤트타입'));

타겟 :  html 요소

객체 : .dispatchEvent()

인자 : Event()

 

사용자가 이벤트를 발생하지 않아도 저절로 이벤트를 발생시킬수 있다.

이벤트 생성이 먼저고 다음으로 이벤트가 발송되는데 

이벤트 성성자인 new Event('타입','{옵션:버블링,캔서블..}') 을 이용한다.

const evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);

아래는 5초뒤에 클릭이벤트를 dispatchEvent()을 이용해 생성한다.

const boxGreeting = document.querySelector('.greeting');
const hello = document.querySelector('.hello');

// 1. 클릭 이벤트 발생시 처리할 동작
boxGreeting.addEventListener('click',()=>{
  hello.innerHTML = '5초 뒤에 클릭이벤트 발생';
});

// 2. dispatchEvent()을 이용한 클릭 이벤트 생성
setTimeout(()=>{
 boxGreeting.dispatchEvent(new Event('click'))
},5000);

 

2. 이벤트 해지: 이벤트이름.preventDefault();

if 조건문을 함께 사용함.

만일 토글버튼이 눌렸다면 휠기능을 해지한다.

 

타겟 :  이벤트이름(함수)

객체 : .preventDefault()

인자 : 없음

 

타겟.addEventListener('타입' ,(이벤트이름) => {
    if () {}
    이벤트이름.preventDefault(); //위의 타입의 이벤트 해지
}