20220527 TIL

event target 가지고 있음.
사용자가 동작을 취하면 event target이 event handler에 연결됨
handler의 매개변수로 전달.

pagex
screenx
deltax(스크롤)

target
eventcurrent.target

addEventListener
removeEventListener
dispatchEvent

이벤트 전파

캡쳐링
위에서 아래로 내려가면서 전파되는 방식. true

버블링
아래에서 위로 올라가면서 전파되는 방식. false(기본)

🙋‍♀️ 버블링 안되게 하는 방법

이너박스 누르면 부모 요소 전부 선택되는 상황.

1. stopPropergation : 이벤트 전파 취소

outerbox.addEventListener('click', (e)=>{
            console.log('outerbox')
]})
]middlebox.addEventListener('click', (e)=>{
            console.log('middlebox')            
]})
innerbox.addEventListener('click', (e)=>{
            console.log('innerbox')
            e.stopPropagation()              
})

2. currentTarget과 target을 동일하게.

currentTarget : 핸들러가 연결된 element(outerbox)불러옴
target : 현재 클릭이 발생한 위치

outerbox.addEventListener('click', (e)=>{
    if(e.target !== e.currentTarget){
        return;;
}
    console.log('outerbox')
})
middlebox.addEventListener('click', (e)=>{
    if(e.target !== e.currentTarget){
         return;;
}
    console.log('middlebox')            
})
innerbox.addEventListener('click', (e)=>{
    if(e.target !== e.currentTarget){
        return;;
}
    console.log('innerbox')              
})

preventDefault : 기본값 방지

check.addEventListener('click',(e)=>{
    console.log('checking apple')
    e.preventDefault();
})
link.addEventListener('click',(e)=>{
    console.log('checking link')
    e.preventDefault();
})

keyCode

event 위임.

부모요소에 이벤트 한번 걸어주고 안에서 자식요소를 처리

      const ul = document.querySelector('ul');
      const list = document.querySelectorAll('li');

  function selectbox(selectedLi){
    list.forEach((li) => {
      li.classList.remove("on");
    });
    if(selectedLi) {
      selectedLi.classList.add("on");
    }
  }

  ul.addEventListener("click", (e) => {
    const selectedLi = e.target;
    console.log(selectedLi);
    selectbox(selectedLi);

### getAttribute/setAttribute

getAttribute : 속성 값 가져오기
setAttribute : 속성 값 설정하기
className : 선택한 오브젝트의 클래스 이름 반환