이벤트버블링

[코딩애플,mdn 등] 이벤트버블링과 이벤트캡쳐링 및 관련 유용한 함수들

이벤트가 DOM트리를 타고 발생하는 흐름 이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려간다. 이벤트는 트리를 따라 내려가면서 addEventListener(..., true)로 할당한 핸들러를 동작시킵니다. addEventListener(..., true)의 true는 {capture: true}의 축약형이다. 이후 타깃 요소에 설정된 핸들러가 호출된다. 이후엔 이벤트가 event.target부터 시작해서 다시 최상위 노드까지 전달되면서 각 요소에 on로 할당한 핸들러와 addEventListener로 할당한 핸들러를 동작시킨다. addEventListener로 할당한 핸들러 중, 세 번째 인수가 없거나 false, {capture: false}인 핸들러만 호출된..

[중요] Level 2 : 14,15(숙제 및 깨달은 점)_for, 버블링활용축약버전

14. 탭 만들기 let kcnt = 0; for (let i = 0; i < $('.tab-button').length; i++) { alert(kcnt++); $('.tab-button').eq(i).on('click', function () { $('.tab-button').removeClass('orange'); $('.tab-button').eq(i).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-content').eq(i).addClass('show'); }) } 깨달은 점 for문의 작동 원리에 대해서 이해가 잘 가지 않았다. i가 0이고, 3까지 i++로 돌아가는 거면 i에는 순서대로 0,1,2 배정되는 것 아닌가? ..