console.dir(btn)/addEventListener

평소 console.log('찍어볼 대상'); 으로 하면

그 내용 그대로 찍히는데 그 안에 있는 객체만 찍히게 하고 싶다면

 

console.dir('찍어볼 대상');

dir을 사용한다.

 

 

addEventListener 함수

이벤트 리스너를 추가함, 연결해주는것

예를들어 여러 코드가있을때

        const box = document.querySelector('.box');

        btn.onclick = (e) => {
            e.preventDefault();
            alert('클릭했습니다');
        }

이렇게 되어있는 코드에서 

유지보수할때 코드확인을 안하고

        const box = document.querySelector('.box');

        box.onclick = () => {
            console.log('클릭했담');
        }

아래에 또 onclick을 쓰게되면

위에서 아래로 읽히기 때문에 덮어씌우게 되서 없어져버린다.

덮어쓰지않고 함수를 추가하려고할때

addEventListener을 사용하면 위에 코드와 아래 코드 둘다 쓸 수 있음. (콘솔로 찍어보면 둘다 보임)