Brower Event

이벤트 리스너

• element.addEventListener(event, handler, [options]);
• options
  • once: true: 이벤트가 트리거 될 때 리서트가 자동으로 삭제됨, 기본값 false
  • capture: 어느 단계에서 이벤트를 다뤄야 하는지를 알려주는 프로퍼티, options을 객체가 아닌 false/true로 할당 시 {capture: false/true}와 동일, 기본값 false
  • passive: true: 리스너에서 지정한 함수가 preventDefault()를 호출하지 않음, 기본값 false

캡처링, 타깃, 버블링

• https://ko.javascript.info/bubbling-and-capturing
• DOM 이벤트에서 정의한 이벤트 흐름엔3가지 단계(캡처링, 타깃, 버블링) 존재
• 버블링과 캡처링은 '이벤트 위임(event delegation)'의 토대가 됨
• event.target: 이벤트가 발생한 가장 안쪽의 요소
  event.currentTarget(=this): 이벤트를 핸들링하는 현재 요소 (핸들러가 실제 할당된 요소)
  event.eventPhase: 현재 이벤트 흐름 단계(캡처링=1, 타깃=2, 버블링=3)
• 캡처링
  • 이벤트가 하위 요소로 전파되는 단계
• 버블링
  • 이벤트가 상위 요소로 전파되는 단계
  • 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러 동작, 가장 최상단의 조상 요소를 만날 때까지 이 과정 반복되면서 요소 각각에 할당된 핸들러 동작
  • event.stopPropagation(): 버블링 방지, 아키텍처를 잘 고려해 꼭 막아야 하는 상황에서만 버블링 막기, 추후에 문제가 될 수 있는 상황을 만들어 낼 수 있음

드래그 앤 드롭

• HTML draggable : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/draggable
  • 열거형 특성으로 true 또는 false 지정 필수
• dragstart
  • 드래깅을 시작했을때 드래깅되는 요소에서 발생하는 이벤트
• dragenter
  • 유효한 드랍 타겟 위에 요소가 진입할 때 drop 타겟에서 발생하는 이벤트
• dragover
  • 유효한 드랍 타겟 위에서 요소가 드래깅될 때 drop 타겟에서 발생하는 이벤트
• drag
• drop
  • 유효한 드랍 타겟 위에 요소가 드랍될 때 drop 타겟에서 발생하는 이벤트
• dragleave
  • 유효한 드랍 타겟 위에 요소가 진입할 때 drop 타겟에서 발생하는 이벤트
• dragend
  • 드래깅이 끝났을 때 드래깅되는 요소에서 발생하는 이벤트
• dataTransfer
  • 드래그앤드랍 이벤트를 위한 모든 이벤트 리스너 메소드는 DataTransfer 객체 반환
  • 드래그앤드랍 동작에 관한 정보 가지고 있는 객체

HTML 스펙

• 6.11.1 Introduction
  • 요소를 드래그 가능하게 만들려면 요소에 draggable 속성을 부여하고 드래그되는 데이터를 저장하는 dragstart에 대한 이벤트 수신기 설정
  • 이벤트 핸들러는 텍스트 드래그 선택이 아닌지 확인한 다음 DataTransfer 개체에 데이터를 저장하고 허용되는 효과(복사, 이동, 링크, 일부 조합)를 설정해야 함
  • 드롭을 수락하려면 드롭 대상이 다음 이벤트를 수신해야 함
    : dragenter
    : dragover
    : drop
  • 원래 요소(드래그된 요소)를 화면에서 제거하려면 dragend이벤트 사용
• 6.11.2 The drag data store
  • 드래그 데이터 항목의 종류로 text, file 이 있음.
• 6.11.3 The DataTransfer interface
  • DataTransfer 개체는 드래그 앤 드롭 작업의 기본이 되는 드래그 데이터 저장소를 노출하는 데 사용
  • event.dataTransfer의 속성들의 기본값은 브라우저에 따라 다를 수 있다. 브라우저 및 사용 중인 플랫폼에 따라 다르기 때문에 정확한 값을 확인하려면 브라우저의 문서 참고. 일반적으로는 dropEffect: 'move', effectAllowed: 'uninitialized', ,,,
• 6.11.6 Events summary
• 6.11.7 The draggable attribute
• 6.11.8 Security risks in the drag-and-drop model
  • 드래그 시작 이벤트부터 드롭 이벤트가 발생하기 전까지는 DataTransfer 개체에 추가된 데이터를 스크립트에서 사용할 수 없도록 해야 함
  • 사용자가 특정하게 드래그 작업을 종료한 경우에만 드롭이 성공한 것으로 간주해야 함
  • 스크립트가 드래그 작업을 종료하면 성공하지 못한 것으로 간주하여 드롭이벤트를 실행하지 않아야 함
  • 스크립트 작업에 대한 응답으로 드래그 앤 드롭 작업을 시작하지 않도록 주의해야 함

MDN

• DragEvent, DataTransfer는 여러 데스크탑 브라우저에서 폭넓게 지원
• DataTransferItem, DataTransferItemList는 제한적으로 사용 가능

iframe

window.frameElement

position: fixed