2019. 6. 18. 19:00ㆍjQuery
이벤트 간편 메소드
======================================================================
// 클릭이벤트
$(select).click(function(event){}) 선택자로 선택된 엘리먼트에서 클릭이벤트 발생시
실행될 함수를 등록한다.
$(select).dbclick(함수) 더블클릭 이벤트 발생시 실행될 함수를 등록한다.
// 마우스이벤트
$(select).mouseenter(함수) 마우스 포인트가 엘리먼트 안으로 들어왔을 때 실행될 함수 등록
$(select).mouseleave(함수) 마우스 포인트가 엘리먼트 밖으로 나갔을 때 실행될 함수 등록
$(select).hover(함수1, 함수2) 마우스 포인트가 엘리먼트 안으로 들어오면 함수1, 나가면 함수2가 실행
$(select).mouseover(함수) 마우스 포인트가 엘리먼트 위로 올라왔을 때 실행될 함수 등록
$(select).mouseout(함수) 마우스 포인트가 엘리먼트 다른 엘리먼트 위로 옮겨갔을 때 실행될 함수 등록
// 키보드이벤트
$(select).keydown(함수) 키보드를 누르기 시작할 때 실행될 함수 등록
$(select).keyup(함수) 키보드가 위로 올라오기 시작할 때 실행될 함수 등록
$(select).keypress(함수) 키보드가 완전히 위로 올라왔을 때 실행될 함수 등록
// 폼이벤트
$(select).submit(함수) 폼 입력값이 서버 제출될 때 실행될 함수 등록
$(select).reset(함수) 폼 입력값이 리셋될 때 실행될 함수 등록
$(select).change(함수) 폼 입력값이 변경될 때 실행될 함수 등록(select, checkbox, radio)
$(select).select(함수) 폼 입력값을 마우스로 블록지정해서 선택할 때 실행될 함수 등록(드래그로 지정)
// 포커스이벤트
$(select).focus(함수) 포커스를 가졌을 때 실행될 함수 등록
$(select).blur(함수) 포커스를 잃었을 때 실행될 함수 등록
$(select).focusin(함수) 자식 엘리먼트가 포커스를 가졌을 때 실행될 함수 등록
$(select).focusout(함수) 자식 엘리먼트가 포커스를 잃었을 때 실행될 함수 등록
// 기타
$(select).ready(함수) Document객체가 준비되었을 때 실행될 함수 등록
* 웹 페이지가 준비되었을 때 실행될 함수 등록
$(select).load(함수) Document객체가 준비되고, 브라우저 화면에 전부 표시된 후
실행될 함수 등록
$(select).resize(함수) 브라우져의 사이즈가 변경되었을 때 실행될 함수 등록
$(select).scroll(함수) 웹 페이지가 스크롤될 때마다 실행될 함수 등록
======================================================================
미래에 생성될 엘리먼트에 이벤트 등록하기
======================================================================
$("선택자1").on("이벤트", "선택자2", function(event) {})
선택자1이 가르키는 엘리먼트안에 선택자2에 해당되는 엘리먼트가 추가되고,
지정된 이벤트가 발생하면 실행될 함수를 등록한다.
(즉, 현재는 존재하지 않지만, 선택자1이 가르키는 엘리먼트 안에 미래에 추가될
엘리먼트에 이벤트함수를 등록할 때 사용한다.)
* 선택자2가 가르키는 엘리먼트가 실제 이벤트가 발생될 엘리먼트다.
* 선택자1이 가르키는 엘리먼트는 부모 엘리먼트가 된다. 선택자1이 가르키는 엘리먼트는
존재하고 있어야한다.
======================================================================
예시) change 함수 함수및 각종 사용예 (장바구니 만들기)
jquery-app -> event -> demo5-change.html 아주 좋은 예
예시2) scroll 함수 사용하기 (인스타 느낌의 스크롤) - 모달 사용
이벤트 강제로 발생시키기
======================================================================
$(select).click()
* 이벤트 간편메소드에서 함수 없이 사용하면 전부 이벤트 강제발생으로 동작한다.
======================================================================
예시) form함수 및 focus, blur 사용
기타함수
======================================================================
$(select).each(함수) 선택자로 선택된 엘리먼트의 갯수만큼 함수를 반복실행한다.(for문을 대체한다.)
사용예)
$('td').each(function(index, el){
// index는 0부터 시작하는 값이다.
// el에는 선택자로 선택된 td 엘리먼트가 순서대로 하나씩 전달된다.
$(el).조작함수();
});
$('td').each(function() {
// 이 함수 내부에서 사용하는 this에는 선택자로 선택된
// td 엘리먼트가 순서대로 하나씩 전달된다.
$(this).조작함수();
})
이벤트 강제로 발생시키기
======================================================================
$(select).click()
* 이벤트 간편메소드에서 함수 없이 사용하면 전부 이벤트 강제발생으로 동작한다.
======================================================================
이벤트 객체의 주요 프로퍼티와 메소드
======================================================================
* 이벤트 발생시 실행될 이벤트 핸들러 함수의 등록 예
$(select).on('click', function(event) {...}) $(select).click(function(event) {...})
* 이벤트 핸들러 함수는 이벤트객체를 매개변수로 전달받을 수 있다.
주요 프로퍼티
event.target 이벤트를 발생시킨 엘리먼트를 반환한다.
event.data 이벤트핸들러와 연관된 데이터를 반환한다.
event.pageX, event.pageY 이벤트를 발생시킨 엘리먼트의 좌표값을 반환한다.
event.type 이벤트의 종류를 반환한다.
event.which 이벤트 발생시 눌려진 키보드의 키나 마우스 버튼을 반환한다.
주요 메소드
event.preventDefault() 이벤트와 관련된 기본 동작의 실행을 방해한다.
(a태그와 form태그 주로 사용)
event.stopPropagation() 이벤트가 부모 엘리먼트로 퍼져나가는 것
(이벤트 버블링)을 중지시킨다.
event.stopImmediatePropagation() 이벤트가 부모 엘리먼트로 퍼져나가는 것
(이벤트 버블링)을 중지시킨다.
※. 이벤트 버블링이란
자식엘리먼트네서 발생한 이벤트가 조상 엘리먼트로 퍼져나가는것을 이벤트 버블링이라 한다.
======================================================================
예시) 이벤트 버블링, event.stopPropagation() 예시
예시2) 이벤트 버블링, event.stopImmediatePropagation() 예시
예시) event.preventDefault(), return false 예제
