SyntheticEvent

Tài liệu này nhằm giải thích SyntheticEvent trong Hệ thống Event của React. Xem Handling Events để biết thêm chi tiết.

Tổng quan

Các hàm xử lý sự kiện sẽ được truyền vào một instance của SyntheticEvent (một lớp bọc các event để triệt tiêu sự khác nhau về event của các trình duyệt). Nó có giao diện (interface) tương tự như một event của trình duyệt, bao gồm stopPropagation(), và preventDefault() và hoạt động giống nhau trên mọi trình duyệt.

Nếu bạn cần lấy event từ trình duyệt vì một lý do nào đó, chỉ cần sử dụng thuộc tính nativeEvent là được. Mọi sự kiện synthetic thì khác nhau và không có map trực tiếp đến các sự kiện của trình duyệt. Ví dự như trong sự kiện onMouseLeave event.nativeEvent sẽ trỏ đến một sự kiện mouseout. Việc mapping không phải là một phần của public API và có thể thay đổi bất cứ lúc nào. Mọi SyntheticEvent object đều có những thuộc tính sau:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type

Lưu ý: Từ bản v17, e.persist() không làm bất cứ điều gì bởi vì SyntheticEvent không còn được pooled.

Lưu ý:

Từ bản v0.14, hàm xử lý event trả về false sẽ không ngừng sự lan truyền của event đó. e.stopPropagation() hoặc e.preventDefault() phải được gọi để ngăn event đó đi tiếp.

Gộp Event

Một SyntheticEvent sẽ được gộp lại nghĩa là SyntheticEvent object sẽ được sử dụng lại và tất cả thuộc tính trong object đó sẽ bị gán null sau khi hàm xử lý event chạy xong. Việc làm này nhằm tăng hiệu suất. Vì vậy, bạn không thể dùng truy cập sự kiện theo phương pháp không đồng bộ. Ví dụ:

function onClick(event) {
  console.log(event); // => object có thuộc tính sẽ bị null sau khi sử dụng.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Không chạy. this.state.clickEvent sẽ là một object có tất cả thuộc tính null.
  this.setState({clickEvent: event});

  // Bạn vẫn có thể truy xuất các thuộc tính của event.
  this.setState({eventType: event.type});
}

Các Events được hỗ trợ

React chuẩn hoá các event để chúng hoạt động giống nhau trên các trình duyệt khác nhau.

Các hàm xử lý event được thực thi trong lúc event bubble lên. Nếu muốn gán hàm xử lý vào lúc capture xuống của event, thêm hậu tố Capture vào sau tên event, ví dụ onClickCapture.

• Clipboard Events
• Composition Events
• Keyboard Events
• Focus Events
• Form Events
• Generic Events
• Mouse Events
• Pointer Events
• Selection Events
• Touch Events
• UI Events
• Wheel Events
• Media Events
• Image Events
• Animation Events
• Transition Events
• Events khác

Tài liệu tham khảo

Clipboard Events

Tên Event:

onCopy onCut onPaste

Thuộc tính:

DOMDataTransfer clipboardData

Composition Events

Tên Event:

onCompositionEnd onCompositionStart onCompositionUpdate

Thuộc tính:

string data

Event bàn phím

Tên Event:

onKeyDown onKeyPress onKeyUp

Thuộc tính:

boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

Thuộc tính key sẽ có những giá trị như trong DOM Level 3 Events spec.

Focus Events

Tên Event:

onFocus onBlur

Những event focus sẽ hoạt động trên tất cả React DOM, không chỉ trong form.

Thuộc tính:

DOMEventTarget relatedTarget

onFocus

The onFocus event is called when the element (or some element inside of it) receives focus. For example, it’s called when the user clicks on a text input.

function Example() {
  return (
    <input
      onFocus={(e) => {
        console.log('Focused on input');
      }}
      placeholder="onFocus is triggered when you click this input."
    />
  )
}

onBlur

The onBlur event handler is called when focus has left the element (or left some element inside of it). For example, it’s called when the user clicks outside of a focused text input.

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log('Triggered because this input lost focus');
      }}
      placeholder="onBlur is triggered when you click this input and then you click outside of it."
    />
  )
}

Detecting Focus Entering and Leaving

You can use the currentTarget and relatedTarget to differentiate if the focusing or blurring events originated from outside of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.

function Example() {
  return (
    <div
      tabIndex={1}
      onFocus={(e) => {
        if (e.currentTarget === e.target) {
          console.log('focused self');
        } else {
          console.log('focused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus entered self');
        }
      }}
      onBlur={(e) => {
        if (e.currentTarget === e.target) {
          console.log('unfocused self');
        } else {
          console.log('unfocused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus left self');
        }
      }}
    >
      <input id="1" />
      <input id="2" />
    </div>
  );
}

Form Events

Tên Event:

onChange onInput onInvalid onReset onSubmit

Xem thêm thông tin về onChange event Forms.

Generic Events

Event names:

onError onLoad

Mouse Events

Tên Event:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Event onMouseEnter và onMouseLeave phát ra từ element được rời đi tới element được đi vào thay vì bubble như bình thường và không có giai đoạn capture.

Thuộc tính:

boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

Pointer Events

Tên Event:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Event onPointerEnter và onPointerLeave phát ra từ element được rời đi tới element được đi vào thay vì bubble như bình thường và không có giai đoạn capture.

Thuộc tính:

Như trong W3 spec, Pointer events được thêm vào từ Mouse Events và có những thuộc tính sau:

number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

Lưu ý về hỗ trợ trình duyệt

Pointer events chưa được hỗ trợ trong tất cả trình duyệt (tại thời điểm viết bài này, những trình duyệt được hỗ trợ: Chrome, Firefox, Edge, and Internet Explorer)). React không cố để polyfill cho những trình duyệt khác vì nó sẽ làm tăng dung lượng react-dom một cách đáng kể.

Nếu bạn cần pointer event, chúng tôi khuyến khích sử dụng pointer event polyfill từ bên thứ ba cho nó.

Selection Events

Tên Event:

onSelect

Touch Events

Tên Event:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Thuộc tính:

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

UI Events

Tên Event:

onScroll

Lưu ý:

Bắt đầu từ React 17, sự kiện onScroll không có bubble trong React. Điều này phù hợp với trạng thái của browser và hạn chế sự nhầm lẫn khi một thành phần (a nested scrollable element) fires các sự kiện trên một thành phần cha xa.

Properties:

number detail
DOMAbstractView view

Wheel Events

Tên Event:

onWheel

Thuộc tính:

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events

Tên Event:

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting

Image Events

Tên Event:

onLoad onError

Animation Events

Tên Event:

onAnimationStart onAnimationEnd onAnimationIteration

Thuộc tính:

string animationName
string pseudoElement
float elapsedTime

Transition Events

Tên Event:

onTransitionEnd

Thuộc tính:

string propertyName
string pseudoElement
float elapsedTime

Other Events

Tên Event:

onToggle