jQuery에서 이벤트 바인딩

JavaScript의 거의 모든 이벤트에 대해 jQuery에는 해당 메서드가 존재합니다. 예를 들어, 요소 클릭은 다음과 같이 캐치할 수 있습니다: $(selector).click(function).

다음 HTML 코드를 살펴보겠습니다:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

이를 위한 CSS가 작성되어 있습니다:

cssli {
  width: 100px;
  cursor: pointer;
}

아무 li를 클릭했을 때 느낌표가 출력되도록 만들어 봅시다. 리스트 항목들을 클릭해 보세요:

javascript$('li').click(function() {
  alert('!');
});

바인딩된 함수 내부에서는 이벤트가 발생한 요소를 가리키는 this를 사용할 수 있습니다 (우리의 경우 클릭된 li). 이 this는 JavaScript 스타일로 사용할 수 있습니다, 예를 들어 this.innerHTML 또는 jQuery 스타일로 - 이를 위해 이 this를 $로 감싸야 합니다, 다음과 같이: $(this).

HTML 코드를 가져옵시다:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

이 코드에는 다음과 같은 CSS 스타일이 적용되어 있습니다:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

li를 클릭했을 때 그 끝에 '!'가 추가되도록 만들어 봅시다. 동작을 확인하려면 리스트 항목들을 클릭해 보세요:

javascript$('li').click(function() {
  $(this).append('!');
});