[jQuery기초] 요소조작_이벤트_on_one_off_trigger_focus_click_hover

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

on 

이벤트를 제어할 수 있는 메서드이며 과거에 사용하던 bind, delegate, live 메서드들의 모든 기능을 제공한다. 
이벤트를 중첩해서 적용하고 싶은 경우 공백을 통해 입력한다.

$('button').on('click mouseenter', function(){ 
	// 코드 작성 
}); 

$('button').on('click', onClickFunction); 
function onClickFunction(){ 
	// 코드 작성 
};

 

one 

이벤트를 제어할 수 있는 메서드이며 on과 동일하나 첫번째 호출에만 실행되는 점만 다르다.

$('button').one('click', function(){ 
	// 코드 작성 
}); 

$('button').one('click', onClickFunction); 
function onClickFunction(){ 
	// 코드 작성 
};

 

on & one 

구문

$(선택자).on('이벤트이름', calbackFunction); 

동적으로 생성되는 DOM 요소에 이벤트 추가

$('#box').on('click', 'button', function(){ 
	// 코드 작성 
});

 

off 

이벤트를 제어할 수 있는 메서드이며 on 메서드를 통해 연결시켰던 이벤트를 제거한다. 
off 메서드 안에 입력 값을 넣지 않으면 on 메서드로 설정한 모든 이벤트의 연결이 제거되므로 주의해야한다.

$('button').on('click', onClickFunction); 
$('button').click(onClickFunction); 

// 선택자의 모든 이벤트 제거 
$('button').off(); 

// 입력된 이벤트 제거
$('button').off('click'); 

 

trigger

on 메서드를 통해 이벤트가 실행되어 있으면 사용할 수 있는 메서드 
trigger 메서드를 통해 수동으로 이벤트를 실행할 수 있다.

$('button').on('click', onClickFunction); 

// 클릭 이벤트가 실행되어 onClickFunction 함수가 실행된다.
$('button').trigger('click'); 

 

focus 

탭 포커싱 이벤트로 on 메서드를 통해 사용할수도 있지만 포커싱 메서드들도 따로 존재한다. 
탭으로 포커싱하거나 마우스 클릭 시에 focus, focusin이 실행되며 포커싱이 빠질 경우 focusout이 실행된다. 
마우스 클릭 시에도 focus, focusin이 실행된다.

// HTML 
<a id="link" href="./경로"></a> 

// jQuery 
$('#a').focus(function(){ 
	// 코드 작성 
}); 
$('#a').focusin(function(){ 
	// 코드 작성 
}); 
$('#a').focusout(function(){ 
	// 코드 작성 
}); 

포커싱할때 : focusin 
포커싱빠질때 : focusout

 

click 

마우스 클릭 이벤트, on 메서드를 통해 호출할수도 있지만 click 메서드도 따로 존재한다.

$('button').click(function(){ 
	// 코드 작성 
}); 

마우스 더블 클릭 : dbclick 
마우스 클릭 버튼 누를때 : mousedown 
마우스 클릭 버튼 뗄때 : mouseup

 

hover

마우스 이벤트로 on 메서드를 통해 사용할수도 있지만 hover 메서드가 따로 존재한다. 
첫번째 function은 mouseenter를 의미하며 두번째 function은 mouseleave를 의미한다.

$('button').hover(function(){ 
	// mouseenter 코드 작성 

}, function(){ 
	// mouseleave 코드 작성 
});

// 해체 시
$('button').off('mouseenter mouseleave');