이벤트 연결 기본

이벤트 연결 기본

on() 메서드를 사용하는 것이 jQuery로 이벤트를 연결하는 가장 기본적인 방법

on()

: 이벤트를 연결합니다.

두가지 형태

1. $(selector).on(eventName, function(event){})
2. $(selector).on(object)

1번 예시) 이벤트 발생 시 이벤트 발생 객체에 '+' 글자를 추가합니다.

$(document).ready(function() {
	// 이벤트를 연결합니다.
	$('h1').on('click', function() {
		$(this).html(function(index, html) {
			return html + '+'
		});
	});
});

이벤트 리스너 안에서 this 키워드는 이벤트가 발생한 객체를 의미한다.

2번 예시) 이름과 속성 값에, 이벤트 이름과 이벤트 리스너를 넣으면 이벤트를 쉽게 연결할 수 있다.

$(document).ready(function() {
	// 이벤트를 연결합니다.
	$('h1').on({
		// 마우스 진입할때 이벤트 이름
		mouseenter: function() { $(this).addClass('reverse'); },
		// 마우스 빠져나갈때 이벤트 이름
		mouseleave: function() { $(this).removeClass('reverse'); }
	});
});