Blog Content

    티스토리 뷰

    제이쿼리 이벤트 구분




    jQuery Event 구분


    일요일이네요~ 시간이 참 빨리 가는것 같습니다.

    현재 일을 잠시 쉬고 있어서 블로그를 열심히? 해볼려고 하고 있는데..

    생각처럼 쉽기자 않네요 ^^;



    오늘은 jQuery Event 를 정리 해볼까 합니다.

    이벤트는 어떤 사건을 의미합니다.


    예를들자면 버튼을 클릭, 혹은 마우스이동, 마우스 스크롤 

    input에 포커스등 일련의 사건들을 의미하는데요.

    아래 표로 정리를 해보도록 할께요~




    문서로딩 이벤트

    이벤트 설명
    ready 문서가 로딩되었을 때 처음 문서를 읽을때에 발생
    unload 해당 문서에서 빠저나갈때에 발생

    처음 페이지를 로딩할 때 혹은 

    문서를 빠저나갈때에 발생하는 이벤트 입니다.



    키보드 이벤트 

    이벤트 설명
    keydown 해당영역에서 키보드를 눌렀을 때
    keypress 해당영역에서 키보드를 계속 누르고 있을 때
    keyup 해당 영역에서 키보드를 눌렀다 떼었을 때

    말 그대로 키보드로 접근할때 이벤트 입니다.



    폼 이벤트

    이벤트 설명
    blur 노드에서 포커스가 이동될 때
    submit 폼의 내용을 전송할 때
    select 텍스트를 선택했을 때
    focus 포커스가 노드에 왔을 때
    change 노드의 값이 변경 될 때


    웰 브라우저 이벤트 

    이벤트 설명
    resize 브라우저 윈도우 사이즈가 변경될 때
    scroll 스크롤이 이동될 때



    마우스 이벤트 

    이벤트 설명
    click 클릭 했을 때
    dblclick 더블 클릭 했을 때
    hover mouseenter와 mouseleave 이벤트를 한번에 bind 한다.
    mousedown 영역에서 마우스를 눌렀다 뗄 때
    mouseenter 영역에 마우스가 진입 했을 때
    mousemove 해당 영역에서 마우스가 움직일 때
    mouseout 마우스 포인터가 해당 영역을 벚어 났을 때
    mouseover 마우스 포인터가 해당 영역에 올라갔을 때
    mouseup 마우스 버튼을 눌렀다 뗄 때
    toggle 클릭할 때마다 함수들을 차례로 실행


    마우스 이벤트는 퍼블리싱을 하며 생각보다 많이 사용되는 이벤트 인데요

    응용하는데 많은 도움이 될것 같습니다.


    생각보다 많은 이벤트 들이 있는데요 

    그래도 사용빈도가 많은 이벤트들 그리고 잘 사용하지 않는 이벤트들이여도

    메모해두고 한번식 사용해보는 것도 좋은 방법 아닐까요?

    '개발연습막쓰기 > jQuery' 카테고리의 다른 글

    이미지 갤러리  (0) 2018.02.06
    아코디언 메뉴만들기  (0) 2018.02.05
    jQuery 시작하기  (0) 2018.02.03
    DOM 문서 객체 모델 돔트리  (0) 2018.02.02
    JQUERY-UI-DATEPICKER  (0) 2018.02.01

    Comments