오늘은 addEventListener 에 대해서 알아봐요!

addEventListener는 event 방식으로 가장 권장되는 이벤트 핸들러 입니다 

사용방식문법또한 어렵지 않습니다!

 

객체.addEventListener('이벤트 종류' , 함수) or 

객체.addEventListener('이벤트 종류' , function(){

 

})

이런한 형태로 사용을 합니다 바로 예제 들어가보죠 

가장 기본적인 addEventListener 활용법입니다

브라우저를 열고 확인을 하시면 잘나옵니다!

bommmmmmm

이번엔 조금더 다양하게 해보겠습니다

 

2개의 버튼을 만들고 하나는 h1테그에 css 넣었고 다른하나는 alert창을 만들었습니다

 

 

h1 클릭하면 css들어가네요

 

 

alert 누르면 alert창이 뜨네요

태그안에 event 주는것을 inline 방식이라고 합니다 

문법을 이해해보면 onclick 이벤트 실행

if(document.getElementById('prevent').checked) checked property가 체크가 되어있다면 return false 실행시키지 마 이런뜻입니다! 참고로 target="_blank" 새창을 열겠다라는 속성 입니다.

이거는 property 방식입니다 이것또한 또같은 형식입니다! 

 

네 마지막으로 addEventListener 방식으로 해보겠습니다.

document.querySelector('a').addEventListener('click' , function(event){

               if(prevent.checked){

              event.preventDefault();

        }

})

 

preventDefault란? 

a 태그나 submit 태그에 href 속성에 동작을 중지하는 것입니다.

이렇게 문법은 짜시면 property 방식하고 똑같은 결과가 나옵니다. 살짝다르죠?ㅠ

 

event에 대해서 알아보았습니다!