jQuery에서 이벤트 바인딩

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

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

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

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

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

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

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

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

HTML 코드를 가져옵시다:

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

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

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

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

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

각 li를 클릭했을 때 그 앞에 '?'가 추가되도록 만드세요.

단락들이 주어져 있습니다. 각 단락을 클릭했을 때 화면에 그 내용이 출력되도록 만드세요.

숫자를 포함한 단락들이 있습니다. 단락을 클릭하면 그 안에 포함된 숫자의 제곱이 나타나야 합니다.