💻 제이쿼리 이벤트 연결 방법

---

이벤트를 처리하기 위해 제이쿼리에선 여러가지 방법을 사용한다.

그 중에서도 .bind같은 경우는 제이쿼리 1.6버전 이후 .on으로 대체되었고, 선택자 이후 바로 이벤트를 작성해주는 경우도 내부적으로 따지고 보면 .on메소드를 이용하여 이벤트 핸들러와 연결된다.

⭐️ 이벤트의 연결 방법 세 가지

---

id가 click_me인 요소에 이벤트 핸들러를 연결하는 방법을 크게 세 가지 알아보겠다.

🔥 .bind() 메소드

jQuery 1.7버전 이상이면 bind()메소드를 사용하지 않고 on()로 대체하여 사용하면 된다.

// $('$btn').bind('click', function(event){
	// 실행할 내용
});

function clickHandler(){
    alert('Hello Javascript');
}

$(document).bind('ready', function(){
    $('#click_me').bind('click', clickHandler);
});

🔥 직접 click메소드 바로 붙이기

이 역시 내부적으로 .on()메소드를 이용하여 이벤트 핸들러와 연결된다.

// $('$btn').click(function(event){
	// 실행할 내용
});

function clickHandler(){
    alert('Hello Javascript');
}

$(document).bind('ready', function(){
    $('#click_me').click(clickHandler);
}); 

🔥 .on() 메소드

1.7버전 부터 소개된 on()메소드이다.

$('#btn').on('click', function(event){
	// 실행할 내용
});

$('p').on('click', function(){
    alert('문장이 클릭되었습니다.');
});

이벤트를 띄어쓰기를 통해 여러개를 적용할 수도 있다.

$('p').on('mouseenter mouseleave', function(){
	$('div').append('마우스가 위를 들어왔거나 빠져나갔습니다.<br>');
});

on 이하절을 객체로 받을 수도 있다.

$('p').on({
	click		: function(){
    	$('div').append('마우스 커서가 문장을 클릭<br>');
    },
    mouseenter	: function(){
    	$('div').append('마우스 커서가 문장 위로 들어옴<br>');
    },
    mouseleave	: function(){
    	$('div').append('마우스 커서가 문장을 빠져나감<br>');
    }
});