본문 바로가기

개발/JQuery

jQuery 이벤트

1. jQuery 이벤트 관련 ㅇ 문서 로딩 이벤트 - ready() : 문서 로딩 (이미지,동영상 등이 아닌 단지 html 문서 만 불러왔음을 알림) . 사용 例) $(document).ready( function() { } ); .. 또는 간략히, $( function() { } ); .. 즉, 위 두 경우 모두, body 태그 내 모든 코드를 읽은 후 호출되는 onload 기능 임 - load() : 파일 로딩 (네트워크를 통해 해당 문서의 모든 리소스까지도 불러왔음을 알림) . 사용 例) $(document).load(); . 사용 例) $(선택).load(URL, 익명 함수 또는 콜백 함수); .. 특정 URL에 대한 파일 로딩 ㅇ 브라우저 이벤트 - resize() : 브라우저 크기조절 이벤트 - scroll() : 브라우저 스크롤 이벤트 ㅇ 마우스 이벤트 - click() : 해당 요소를 클릭 - dbclick() : 해당 요소를 더블 클릭 - mouseenter() : 마우스 포인터가 해당 요소로 진입 - mouseleave() : 마우스 포인터가 해당 요소 밖으로 벗어남 - mouseover() : 마우스가 해당 요소 위로 움직일 때 - mouseout() : 마우스가 해당 요소 밖으로 움직일 때 - mouseup() : 마우스 버튼에서 손을 땜 - mousedown() : 마우스 버튼을 누름 - mousemove() : 마우스 포인터가 이동 함 . 마우스 커서가 해당 요소내를 움직일 때 또는 커서의 위치 확인에 유용함 - hover() : 위 둘(mouseover,mouseout)을 동시에 고려함 . $().hover(f1,f2); // 요소 위에서 f1 실행, 요소 바깥 f2 실행 - focusin() - focusout() ㅇ 키 이벤트 - keydown() : 키를 누름 - keyup() : 키에서 손을 땜 - keypress() : 키를 눌러 문자가 연결되었을 때 . (즉, 화면에 글자가 완성되는 경우 만) (누르고있는 동안 계속 발생) ㅇ 폼 이벤트 - blur() : 포커스를 잃을 때 - focus() : 포커스를 얻을 때 - submit() : 폼 전송 - change() : 폼 필드에서 요소 값 변경 (input,select,textarea 등) - select() : 텍스트 상자/영역 등에서 영역을 선택 ㅇ 기본 이벤트 * 요소에 개발자가 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트 . a 요소를 클릭 => 해당 경로로 페이지 이동 . 브라우저 화면에서 우측 마우스 버튼을 클릭 => ContextMenu 나타남 . form 요소 내부의 submit 버튼을 클릭 => 지정된 경로로 내용을 전송 2. 이벤트 연결,처리,위임 ㅇ 단축 이벤트 메서드 : 위 1.항의 이벤트 메소드들을 말함 - 例) $(요소).clink( function() { } ) - 위 1.항의 이벤트 메소드들 각각에 전달 파라미터를 비워두면, 해당 이벤트를 발생시킴 ㅇ 표준적인 이벤트 메서드 : on(),bind(),off(),unbind() ㅇ on(), off() : jQuery 1.7 부터 추가됨 - on() : 이벤트 연결, 이벤트 위임 처리 . 사실상, on() 메서드 하나로도 위 대부분의 이벤트 메소드들을 수용 가능 .. 이벤트 메소드명 옆 () 안에, 그 이벤트를 다룰 함수를 전달하게 됨 . 例) $(요소).on("click", function() { }) - off() : 이벤트 해제 ㅇ bind(), unbind() - bind() : 이벤트,이벤트 핸들러,데이터도 함께 연결시켜줌 . $().bind(이벤트명, 객체 리터럴 등의 데이터, 수행시킬 이벤트 핸들러 이름) .. 가운데 데이터는 선택적(없을 수 있음) - unbind() : 이벤트 제거 ㅇ delegate() : 이벤트 위임 3. jQuery 이벤트 객체 프로퍼티 - altKey, attrChange, attrName, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, detail, eventPhase, fromElement, keyCode, layerX, layerY, metaKey, newValue, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedNode, relatedTarget, screenX, screenY, shiftKey, srcElement, target, toElement, view, wheelDelta, which ㅇ 메소드 - preventDefault(), stopPropagation(), stopImmediatePropagation(), isDefaultPrevent(), isPropagationStopped(), isImmediatePropagationStopped()


'개발 > JQuery' 카테고리의 다른 글

jQuery  (0) 2018.03.11