[jQuery] 이벤트 바인딩

우리는 지금까지 이벤트를 이런형식을 달아왔습니다

button[0].addEventListener('click',myFunc);

이렇게 jquery object를 unwrap을 하고 Vanilla js의 메소드를 사용할 수 있었습니다. 하지만 여기에 한가지 문제가 있습니다. vanilla js addeventlistener는 IE8이나 다른 인터넷 버전 호완이 안좋다는 거죠. 그래서 우리는 jQuery의 이벤트 바인딩 메소드를 사용할 수 있습니다.

 

.on()은 addEventListner랑 같은 방식으로 사용될수 있습니다.

button.on('click',myFunc);

이런 식으로 말이죠 이제 클릭하면 콜백함수인 myFunc이 실행될것입니다.

 

.on의 엄청난 장점이 하나 있습니다.

 

이런 JS코드를 봅시다

list = document.getElementsByClassName('menu-list');//list에 array-like가 담김

//array-like를 array에 담아야함
Array.from(list);

//그리고 array안에 있는 element에 전부 이벤트 리스너를 바인딩하려면 for loop을 사용해야함
Array.from(list).forEach(item=>{
   item.addEventLister('click',myFunc);
});

이렇게 하나의 element가 아닌 여러 element를 select했을때 각 for loop과 Array.from메소드를 사용해야 이벤트 리스너를 바인딩 시킬 수 있습니다.

 

하지만 on을 통하여 이것을 굉장히 쉽게 할 수 있습니다.

list = $('.menu-list');//jQuery가 알아서 .menu-list를 array에 담아줌

list.on('click',myFunc);//for loop을 사용할 필요없이 모든 array element에 이벤트를 바인딩 해줌

.on 을 사용하니 굉장히 쉽죠?

 

그리고 언바인딩을 하고 싶으면 이렇게 하면됩니다.

list.off('click');

 

이제 바인딩을 .on()을 더 쉽게 사용할 수 있는 event helper을 봅시다.

 

list.on('click',function);

list.click(function);

위 코드를 .on을 사용하지 않고 바로 메소드처럼 사용할 수 있습니다. 

list.dblclick(function)//모든 이벤트들이 이렇게 사용가능함

 

.off는 줄일 수 없습니다.

.off('click') 이렇게 사용해야함

 

DOCUMENT READY, WINDOW LOAD

우리가 jQuery코드를 칠때 제일 처음에 치던게 뭐였죠?

$(document).ready(function(){

//jQuery 코드
)

이제 우리가 별 생각없이 치던 이 코드의 의미를 봅시다.

 

우선 $(document)는 document를 select하는 거겠죠? 

그럼 그 select된 document가 ready일때 콜백 함수를 실행하는 겁니다.

그러니까 우리가 js를 apply해야될 HTML이 다 준비 될때 jQuery를 실행하는 것이죠.

 

그러니까 위코드드 다음과 같습니다

$(document).on('ready',function(){

})

이 코드를 event helper를 사용해 줄인거죠.

 

그럼 window load를 볼까요?

$(window).load(function{
//jQuery 코드
});

이런 식으로 사용이 가능합니다.

document ready와 다른점은 window load는 html뿐만아니라 이미지를 포함한 모든것이 로드 됬을떄 실행하는것이죠.

 

+보너스 Event object in jQuery

우리는 js addEventLIstener에 자동으로 전달되는 event object대해 알고 있습니다.

그 event object를 jQuery에서도 사용할 수 있습니다.

 

$('*').click(function(event){
//code

})

이런식으로 말이죠. 

위 코드는 body안의 모든 태그에 클릭 이벤트 핸들러를 달아준겁니다.

$('*').click(function(event){
   console.log(event.type);
   
   event.stopPropagation();//이것을 사용하면 event bubbling을 멈출 수 있음

})

우리는 어떠한 element가 클릭되면 event.type인 click을 console.log하는 코드를 만들어 봤습니다.

event.stopPropagation()을 한 이유는 지금 모든 body에 있는 element에 이벤트 핸들러가 달려있죠.

그래서 만약 child element가 클릭된다면 child element의 이벤트 핸들러가 실행되겠죠

그 다음은 parent element의 이벤트 핸들러 이런식으로 쭉 올라갈겁니다. 그래서 이런 propagation을 멈추기 위해 stopPropagation()을 사용했습니다.

 

$('*').click(function(event){
   console.log(event.type);
   console.log(event.target);//click한 inner most element가 나옴
   console.log(event.pageX);//click 한 것의 X좌표
   console.log(event.pageY);//Y좌표
   event.stopPropagation();//이것을 사용하면 event bubbling을 멈출 수 있음

})

이렇게 event object를 사용하여 어러가지 event의 정보를 확인 할 수 있습니다.