addEventListener 와 자주 사용하는 event

addEventListener(event, f, [boolean, {options}]) 

 

첫번째로는 Event명

두번째로는 콜백함수 function (e) {} 여기에 e는 이벤트의 객체인데 써도 되고 안써도 되는데

addEventListener는 일단 던져준다.

세번째는 사용해도 되고 안해도 되는 것인데 useCapture의 boolean값으로 default는 false이다.

버블링과 캡쳐링 관련 설명은 다음에 적는것으로.. 

캡쳐 -> 타겟 -> 버블 음.... 다음에.. ㅋㅋ

무튼 false면 캡쳐단에서는 동작안하고 버블단에서 동작한다는 의미

그리고 options {capture:false, once:true, passive:false}

capture = useCapture

once는 참이면 한번만 실행 됨

passive 속성이 false인 경우에 touchstart, touchmove와 같은 이벤트가 발생하면

 preventDefault를 이용하여 실제 이벤트 자체를 막을 수 있기 때문에, 

브라우저는 scroll을 계속 할지 안할지를 매번 감시해야만 한다.
하지만, passive 속성이 true일 경우에는 preventDefault를 이용하여 scroll 이벤트를 막지 않겠다고 

브라우저에게 이야기하는 것과 같다. 

따라서, 이 룰을 어기면 브라우저는 가차없이 다음과 같은 에러를 던진다.
다행이 passive 속성의 기본값은 false 이기 때문에, 기존 코드는 문제가 되지 않는다.
하지만…
Chrome 54+ 부터 EventListenerOptions의 passive 속성이 특별한 상황일 경우에는 기본값이 true로 설정된다.
document또는 body에 이벤트 리스너를 추가할때, touchstart, touchmove와 같이 스크롤이 블록되는 이벤트인 경우, passive의 기본 속성값은 true가 된다.

 

 

첫번째 Event로 자주 사용하는 것은 어떤것들이 있을까?

Event	설명
click	객체를 클릭 시
focus	객체에 포커스가 있을경우
blur	객체에서 포커스가 벋어 날 경우
keydown	키를 눌렀을 때
keyup	키를 땟을 때
change	변경이 있을 때
select	select option 등 객체를 선택 시
load	로드됬을 경우
mousedown	마우스 눌렀을 때
mouseout	개체 박으로 커서가 나갈 경우
mouseover	객체 안으로 커서가 들어올 경우
mousemove	커서가 움직였을 때
mouseup	마우스에서 클릭 후 땔 때

 

const dropdownToggles = document.querySelectorAll('.dropdown-toggle')
const dropdowns = document.querySelectorAll('.dropdown')
const dropdownMenus = document.querySelectorAll('.dropdown-menu')
const dropdownItems = document.querySelectorAll('.dropdown-item')

//legend 클릭 되면 내용을 보여라

dropdownToggles.forEach(function (item) {
    item.addEventListener('click', function (e) {
        const dropdown = e.currentTarget.parentNode.querySelector('.dropdown');
        dropdown.classList.toggle('show');
        const marker = e.currentTarget.querySelector('.marker');
        marker.classList.toggle('hide');
        console.log(marker);
    })
})

간단한 드롭다운 구현