[jQuery] bind 함수로 이벤트 연결 방법

안녕하세요.

Milkye 입니다 :)

날씨가 좋았던 하루였네요. 

오늘은 jQuery에서 이벤트를 다른 함수로 연결(bind)해주는 방법에 대해서 알아보도록 할게요.

bind 함수에 대해서 간단하게 설명을 해볼게요. 

우리가 jQuery에서 어떠한 이벤트가 발생을 했을 때 사용하는 방법입니다.

예를들어서 버튼의 클릭이 발생했다고 하면 우리는 대부분 이러한 방법을 사용할 것입니다.

대부분 이렇게 사용을 하시죠?

만약 여기에 다른 클릭이벤트 뿐 아니라 다른 이벤트들이 추가가 된다면 어떨까요?

저는 버튼이 눌린 mousedown과 떼어진 mouseup을 추가를 시키고 싶습니다.

그러면 저렇게 코드를 3줄을 더 써야하겠죠?

그런데 이걸 하나로 묶는 방법이 있습니다. 그게 바로 bind인 것이죠.

지금은 클릭됨,눌림,떼어짐 이렇게 3가지 문구로 구분을 하여 아래처럼 표현을 하였습니다. 

 

(코드가 뭔가 좀 깨졌네요... 이해해주세요 ㅠㅠ)

저렇게 button1에 bind를 걸어서 click, mousedown, mouseup 이렇게 3개의 이벤트를 묶었습니다.

만약 이 세개의 이벤트가 발생을 했을 때 모두 다 똑같은 액션을 취해야 한다면 아래와 같이 작성을 할 수 있습니다.

 

이렇게 말이죠! bind() 함수를 이용해 여러 이벤트를 공통된 함수에 연결을 할 수도, 각각의 함수에 연결을 할 수도 있습니다. 여러분이 편하신대로 함수를 골라서 사용을 해주시면 될 것 같습니다.

그럼 안뇽!!