jQuery에서의 이벤트 위임
JavaScript를 공부하셨다면, 새로운 요소에 이벤트를 등록할 때 발생하는 문제를 해결할 수 있는 이벤트 위임이라는 주제를 이미 접해보셨을 것입니다. jQuery에서 이것이 어떻게 구현되는지 살펴보도록 하겠습니다.
다음 HTML 코드를 사용하겠습니다:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
이에 대한 CSS는 다음과 같습니다:
li {
width: 100px;
cursor: pointer;
}
이제
on 메서드를 사용하여,
이전 강의들에서 했던 것처럼 목록 항목 li가 아니라 목록 ul 자체에
click 메서드를 바인딩해 보겠습니다. 또한 두 번째 (선택적) 매개변수로 하위 선택자로서
'li'를 전달할 것입니다. 결과를 확인해 봅시다:
$('ul').on('click', 'li', function() {
$(this).append('!');
});
ul이 있고, 그 안에 여러 개의 li가 있습니다.
ul 아래에 버튼을 만들고, 클릭하면
ul의 끝에 텍스트가 '항목'인 새로운 li가 추가되도록 하세요.
각 li를 클릭하면 그 끝에 '!'가 추가되도록 만드세요.
이 기능은 새로 추가된 li에서도 작동해야 합니다.
이벤트 위임을 사용하여 문제를 해결하세요 (즉, 이벤트는 ul에 등록되어야 합니다).
이름과 성이라는 두 개의 열을 가진 사용자 테이블이 있습니다.
테이블 아래에 양식을 만들어 테이블에 새 사용자를 추가할 수 있도록 하세요.
모든 셀을 클릭하면 셀의 텍스트를 수정할 수 있는 prompt가 표시되도록 만드세요.
이벤트 위임을 사용하여 문제를 해결하세요 (즉, 이벤트는 table에 등록되어야 합니다).
