728x90 300x250 버블링2 [버블링]아직 만들어지지 않은 요소 이벤트 처리하기 버블링을 활용하면 아직 만들어지지 않은 요소에서 발생하는 이벤트를 처리 할 수 있다. 아래와 같은 html코드가 있을때 add list1 list2 list3 list4 add 버튼을 클릭하면 동적으로 li추가 스크립트 let count=4; $(".add").click(function(){ count++ $(".list").append(`list${count}`); }) 먼저 일반 클릭 이벤트를 사용해서 테스트를 해보자 $("ul.list li").click(function() { $(this).css('background-color','#ddd'); }) 결과를 확인하면 새로 만들어진 li에는 색이 변경되지 않는다. 이유는 이벤트를 등록하는 시점에 새로 추가된 li는 존재하지 않아서 이벤트 리스너가 .. 2023. 3. 13. [jQuery] event.target와 this의 차이 + 이벤트 위임 예시 event.target 이벤트가 발생한 정확한 지점에 대한 정보를 반환한다. event.target는 실제 이벤트가 시작된 target요소 버블링 되어도 변하지 않음 this(=event.curentTarget)는 현재 샐행중인 핸들러가 할당된 노드를 참조 이벤트 위임(event delegation) 요소마다 이벤트 핸들러를 할당하지 않고 공통 조상요소에 할당해서 한개의 이벤트 핸들러로 여러 요소를 한꺼번에 처리 할 수 있다. 공통 조상에 할당한 핸들러에서 event.target를 이용하면 실제 이벤트가발생한 위치를 알 수 있고 이를 이용해서 이벤트를 핸들링 할 수 있다. 하나의 이벤트 리스너로 여러 이벤트 처리하기 $대상.on("이벤트명", "선택자", 이벤트 리스너) 아래는 ul li리스트 중 하나를.. 2023. 3. 12. 이전 1 다음 728x90 반응형