jQuery(제이쿼리 이벤트 + Ajax(기본형)) <완결>

여러분 안녕하세요~ 19살 IT 개발자 포돌이입니다.  저번 시간에는 jQuery(수치 조작 메소드를) 끝내면서, 선택자 파트를 마무리하였습니다. 오늘은 jQuery(제이쿼리 이벤트+ Ajax)를 나가보려고 합니다. 그러면 한번 진행해보도록 하겠습니다. 중요한 메소드들로만 담았다는 점 양해 부탁드립니다.

 

 

이벤트 등록 메소드

이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말합니다. 이 메소드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있습니다.

 

기본형

 

 

기본형을 봤으니 본격적으로 이벤트 종류 메소드를 알아보도록 하겠습니다.

 

단독 이벤트 등록 메소드

단독 이벤트 등록 메소드는 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있습니다.

 

기본형

 

 

그룹 이벤트 등록 메소드

 

그룹 이벤트 등록 메소드는  대상에 한 가지 동작 이상의 이벤트를 등록할 수 있습니다.

 

기본형

 

 

 

코딩해보기

 

버튼을 눌러야지만 색상이 반응합니다 색상이 반응된 버튼을 한번 더 누르면 다지 검은색(#000)으로 바뀝니다.

 

강제 이벤트 발생 메소드

 

기본형

 

 

코딩해보기

 

 

강제 이벤트 발생시키는 에제의 결과는 버튼을 아무리 눌러도 색상이 꺼지지 않습니다 참고해주세요.

 

 

이벤트 제거 메소드

 

이벤트를 제거하려는 메소드로 off()가 있습니다 그러면 off()메소드를 사용한 기본형을 보겠습니다.

 

기본형

 

 

코딩해보기

 

 

이벤트 제거 에제의 결과는 강제로 이벤트 발생 예제 결과의 반대로 버튼을 아무리 눌러도 색상이 켜지지 않습니다 참고해주세요.

 

로딩 이벤트 메소드

로딩 이벤트 메소드는 사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행합니다. 그러면 이제 로딩 이벤트 메소드 종류를 보시겠습니다.

 

 

ready()/load() 이벤트 메소드

ready() 이벤트 메소드는 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document)의 로딩이 끝나면 이벤트를 발생시킵니다.

 

load() 이벤트 메소드는 외부에 연동된 소스의 로딩이 끝나면 이벤트를 발생시킵니다.

 

기본형

 

* 이 부분은 기본형만 훑고 넘어가겠습니다. 

 

 

마우스 이벤트

마우스 이벤트는 사용자가 사이트에서 마우스를 이용해서 취하는 모든 행위를 말합니다. 가령 사용자가 지정한 요소에 마우스 포인터를 올리거나 클릭하는 등의 행위를 말합니다. 그럼 마우스 이벤트 메소드 종류를 확인해보실까요?

 

click()/dbclick() 이벤트 메소드

click() 이벤트 메소드는 선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 간에졸 클릭 이벤트를 발생시킬 때 사용합니다.

 

dbclick() 이벤트 메소드는 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 더블클릭 이벤트를 발생시킵니다.

기본형

 

 

 

<a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기

<a> 요소에 click이나 dbclick을 등록하면 클릭할 때마다 <a>에 링크된 주소로 이동하는 문제가 발생합니다. 이 문제를 해결하려면 <a> 요소의 기본 이벤트를 차단해야 합니다. <form> 태그도 마찬가지입니다.

 

기본형

 

코딩해보기

 

 

 

포커스 이벤트

포커스는 마우스로 <a> 또는 <input> 태그를 클릭하면 생성됩니다. 우리가 앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없습니다. 마우스가 없으면 키보드로만 사용을 해야겠지요? 이 상황을 대비하여 키보드로만으로도 사이트를 원활하게 돌아가도록 만들어야 하는데 이를 키보드 접근성이라고 합니다.

 

이제 이벤트 메소드의 종류를 확인해보도록 하겠습니다

 

기본형

 

 

코딩해보기

 

 

Ajax

Ajax(Asynchronous Javascript and XML)는 클라이언트가 비동기 방식으로 자바 스크립트를 이용하여 화면 전환 없이 서버 측에 자료를 요청할 때 사용합니다. 기본형만 보여드리고 마치도록 하겠습니다.

 

[출처] https://cafe.naver.com/doitstudyroom/27220

 

 

드디어!! jQuery(제이쿼리 이벤트 + Ajax(기본형)) <완결>을 완료했습니다. 사실 빠진 부분이 많아요...

특히 제이쿼리 부분은 메소드가 너무 광범위하고 끝까지 다하려고 하니 지금 몸상태가 말이 아니더라고요..

이벤트 메소드도 빠진 부분이 많고 Ajax는 그냥 기본형만 알려드리고 끝났는데...

 

독자분들께 죄송해서 눈물이 나오네요 정말.. 제 글을 읽어주시는 분들께 정말 죄송하고 감사의 말씀을 드립니다.

 

그러나 메소드의 일부분을 뺏다고 해서 완전히 모르는 것은 아닙니다. 여러분들은 제이쿼리에 대해서 거의 80프로 정도 아신 거고요. 앞으로도 제 글 외에도 다른 블로그나 책으로도 공부를 하시면서 하나씩 언어를 마스터하시면 여러분은 한국 상위 1프로 최고의 개발자들과 나란히 하시게 될 겁니다.  수고 많으셨습니다.

며칠 쉬고 새로운 언어를 준비해서 다시 찾아뵙도록 하겠습니다!!

 

지금까지 19살 IT 개발자 포돌이였습니다 감사합니다!!

 

-Coding is an Art-

코딩을 예술이라 생각하는 사람