jQuery contents() 함수

개요

html 요소에서 일반적으로 특정 요소에서 클릭 이벤트 캐치를 하려면 다음과 같은 코드를 사용한다.

$(selector).click(function(event){
	// do something...
});

만약 페이지 전체의 클릭 이벤트 캐치는 어떻게 해야할까? 일단, 다음과 같은 코드가 떠오른다.

$(document).click(function(event){
	// do something...
});
// document 대신 body 태그도 괜찮을 듯 하다.

하지만 이렇게 해도 안잡히는 요소가 있으니 문제였다. iframe 같은게 대표적일듯 하다. 이 아이프레임 요소에 클릭한 이벤트를 어떻게 캐치할까 고민하다가 .contents()라는 jQuery 함수를 찾았다.

contents() 함수

.contents() 함수는 iframe 문서의 내용을 접근을 할 수 있다. 하지만 이 아이프레임은 같은 도메인이어야 한다는 전제 조건이 있긴 하다. 여튼 이 함수의 사용법은 다음처럼 쓴다.

$("iframe").contents().click(function(event){
	// do something...
});

위처럼 하면 현재 document의 모든 iframe 요소에 대해 클릭 했을 경우 이벤트 캐치를 할 수 있다. 여기서 조금 더 세밀하게 조절하고 싶다면,

$("iframe").contents().find("a").click(function(event){
	// do something...
});

위처럼 코드를 작성해서 iframe 내부 요소 중 a 요소를 클릭했을 때 이벤트 캐치를 하도록 할 수 있다.