[KH국비지원 웹개발자 과정] Day_49 키워드, jQuery 이벤트

 해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

자바스크립트 배열 실습문제 )
브라우저에서 반복작으로 기능을 수행하게 할 경우
마지막에 관련된 변수 및 배열을 초기화해주는 로직 필요.

jQuery객체와 DOM객체는 다르다.

명품 웹프로그래밍교재)
 DOM객체의 구성요소 (W3C 표준)
1. 프로퍼티
2. 메소드
3. 컬렉션
4. 이벤트 리스너
5. CSS 스타일

jQuery를 이용한 이벤트 처리

이벤트 참조 | MDN

 

이벤트
 :사용자의 마우스클릭, 키보드입력, 이미지나 HTML 문서 로딩, 입력, 브라우저나 문서의 상태변화 등을 자바스크립트 코드에게 알리는 통지이다.  브라우저에서 이벤트가 발생했다. 대략 70여가지의 이벤트가 있다.

이벤트 리스너
 :이렇게 발생한 이벤트를 받아서 적절하게 처리하기 위해 작성하는 자바스크립트 코드를 이벤트 리스너라고 한다.

이벤트 객체
  :브라우저에서 발생한 이벤트에 관련된 객체로 프로퍼티와 메소드를 가지고 있는 객체이다. 이는 이벤트 리스너 함수의 첫번째 매개변수로 설정하여 사용할 수 있으며 보통 e로 기재한다. 단 인라인 방식으로 HTML태그에 이벤트 리스너를 만드는 경우 이벤트 객체는 event라고 사용한다.

이벤트의 흐름 : 캡쳐와 버블
  :발생된 이벤트는 최상위 객체인 window부터 이벤트 대상 객체까지 내려갔다가 다시 window까지 올라가서 사라진다. window에서 해당 객체까지 이벤트가 내려가는걸 캡쳐라 하며 해당객체에서 window까지 다시 거슬러 올라가는 것을 버블이라고 한다.
 이런 흐름을 갖는 이유는 초기 넷스케이프사와 인터넷익스플로러의 이벤트흐름 방식이 달랐기 때문. 표준방식으로 두가지를 합치게 되어 이벤트는 window에서 해당객체까지 내려갔다가 다시 window로 돌아오는 흐름을 갖는다.

이벤트 리스너의 종류 : 캡쳐 리스너와 버블 리스너
 :일반적으로 따로 설정하지 않는 경우의 리스너는 버블 리스너이다. 여기서 이벤트 버블링이 발생할 수 있다. 해당 객체에서 window로 다시 이벤트가 되돌아가는 과정에서 해당 이벤트와 일치하는 버블 이벤트 리스너가 있을 경우 그 이벤트 리스너의 내용도 실행이 되어버린다. 이런 이벤트 버블링을 막을 수 있게 하는 것이 stopPropagation() 이다. return false; 도 가능

이벤트 실습
mouseover
click
dblclick
mousedown
mouseup
event.pageX / event.pageY
keyup / keydown
keypress
mouseenter
mouseleave

이러한 이벤트들을 활용하는 것이 중요한 이유.
화면단에서 정보를 입력받을 때 유효성 검사 등의 처리를 하여 쓰레기 값을 서버로 넘기지 않게 한다.

체크박스가 체크가 되려면 해당 태그에 checked가 추가되면 됨.
1) jQuery의 prop 메소드를 이용함.
2) attr("checked","checked");

코드의 중복을 줄이고자 노력하기

이벤트 trigger 기능
$( ).off(이벤트)로 해당 태그의 이벤트를 끌 수 있다