jQuery Event.

동아리 활동이나 졸작할땐 필수적으로 들어갈 기능 대충 생각하고 구글링하거나 책같은거 참고해서 오류만 안나면 오케이였는데,
맡겨진 업무를 하면서 코딩하다보면 line by line으로 모르는거 물어보거나 이전보다 많이 찾아보게 되고,
조금 더 사용자의 입장에서 생각하고 이게 더 편할까 저게 더 편할까 이렇게 보여주는 것이 더 나을까 생각하게 되는 것 같당.
아무튼 그럼 본론으로 들어가서 이번 포스팅에서는 제이쿼리 이벤트 처리에 대해 알아보자!

먼저 이벤트란 무엇일까???

클릭을 하는 것, 마우스로 드래그하는 것, 타닥타닥해서 작성하는 것 등등 웹 페이지에서 일어나는 동작들이 다 이벤트이다.
즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.

이런 이벤트들을 처리하기 위해서는 이벤트 핸들러라는 함수를 작성해서 연결해야 한다.
또한 이벤트 핸들러 함수는 이벤트 객체를 인수로 전달받을 수 있다. 아래 예시를 하나하나 보면서 더 자세히 설명해보도록 하겠다.

먼저 $("button").on 이란 button 태그들을 찾아서 이벤트를 연결할 것이라고 알려주는 코드이다.
.on() 메소드를 사용하면 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 걸어 줄 수 있다고도 한다.
또한 .on()과 반대로 .off() 메소드는 더는 사용하지 않는 이벤트와의 연결을 제거해준다!

그 다음$("#text")는 id가 text인 것들을 찾아서 알려주는 것이고,
.append()는 선택된 요소 뒤에다가 새로운 것들을 추가할 수 있게 해 주는 것이다.

따라서 위 이미지의 6 ~ 8번째 라인을 풀어서 설명하면,
버튼이 클릭되었을 때 버튼 뒤에 "마우스가 버튼을 클릭했어요!"라는 text를 찍어준다 라고 해석할 수 있다.

click() 이외에도 hover나 focus등 다양한 이벤트들이 존재하는데 이런 것들은 각자 찾아보기ㅎㅎㅎㅎ