JavaScript 6.이벤트 Event

<2020.10.05>

이벤트 객체

• 모든 이벤트의 정보를 event 객체로 제공
• 속성
  • type : 이벤트 종류 (예:click)
  • target : 이벤트가 발생한 객체(요소)
  • pageX, pageY : 문서의 좌상단을 기준으로 한 마우스 좌표
  • screenX,screenY : 화면상의 좌표
  • button : 눌러진 마우스 버튼
    : (0:왼쪽버튼, 1:휠(중간)버튼, 2:오른쪽 버튼)
• 메소드
  • preventDefault()
  • stopPropagation()

마우스 이벤트

• click/ dbclick : 클릭/ 더블클릭
• mousedown : 누를때
• mouseup : 뗄때
• mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동 시
• mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동 시
• hover : mouse enter와 leave의 조합
• mousemove : 마우스가 움직일 때
• mouseout : 마우스가 요소를 벗어날 때
• mouseover : 마우스가 요소 안에 들어올 때

기타 이벤트

• keypress
• keydown
• keyup
• submit
• change
• focus/blur : focus 많이 씀
• load
• resize
• ready : 문서가 완전히 로드되었을 때 (load와 비슷)
• on : 선택한 요소에 여러 이벤트를 넣었을 때 사용

이벤트 객체 메소드1

• event.preventDefault()
  • 요소의 기본 작업이 발생하지 않도록 함
  • 예) 제출 버튼이 양식을 제출하지 못하도록 / 링크가 URL을 따르지 못하도록
  • a태그를 클릭해도 링크페이지로 이동하지 않는다!
  • event.preventDefault(); , return false;
    https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_stoppropagation

이벤트 객체 메소드2

• event.stopPropagation()
  • 부모 요소에 대한 이벤트 버블링을 중지하여 부모 이벤트 처리기가 실행되지 않음
  • (ex) 1005_mouseEvent4-1.html, 1005_mouseEvent4-2.html
  • toggleClass 사용하여 mouseover,mouseout 한번에 적용
    (ex) 1005_mouseEvent5.html

이벤트 연결 메소드1

• 이벤트(Event) : 웹페이지에서 발생하는 사용자의 동작들
• 이벤트 핸들러(Event Handler) : 이벤트를 처리하는 것
• 이벤트 바인딩(Event Binding) : 특정요소에 이벤트 핸들러를 연결 하는 것
• 현재 버전
  • 이벤트 연결: $(selector).on(...)
  • 이벤트 제거 : $(selector).off(...)

이벤트 연결 메소드2

• $(selector).on(event, childSelector, data, function, map)
  • 선택된 요소와 하위 요소에 한 개 이상의 이벤트를 바인딩
  • 현재 로드 된 요소 및 스크립트로 생성될 새로운 요소에도 적용됨
  • on 사용법 예제 1005_mouseEvent5.html
• $(selector).one(event, data, function)
  • 선택된 요소와 하위 요소에 한 개 이상의 이벤트를 바인딩
  • 이벤트가 한 번만 수행되고 제거됨
• $(selector).off(event,selector,function(eventObj),map)
  • 선택된 요소에 on메소드로 연결된 이벤트를 제거

이벤트 연결 메소드3

• $(selector).trigger(event, ...)

  • 이벤트의 기본동작을 발생시킴
  • 선택된 모든 요소에 동작
  • 해당 요소들에 차례대로 동작이 버블링 후 최종적으로 마지막 요소에 포커스가 놓이게 됨
    https://www.w3schools.com/Jquery/tryit.asp?filename=tryjquery_event_trigger

• $(selector).triggerHandler(event,...)

  • 함수만 실행시키고, 이벤트의 기본동작은 발생시키지 않음
  • 선택된 첫 번째 요소만 실행시킴
  • DOM 구조에 버블링 되지 않으므로 클릭한 자신에만 포커스가 놓인다
    https://www.w3schools.com/Jquery/tryit.asp?filename=tryjquery_event_triggerhandler

• trigger & triggerHandler 차이점

  • form형식의 focus 여부
  • trigger : trigger적용한 버튼 누르면 input안에 파랑색
  • triggerHandler : triggerHandler 적용한 버튼 누르면 input안 변화 없음

• 관련 예제 1005_mouseEvent6_trigger&triggerHandler.html