SyntheticEvent

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React and include live examples:

Common components (e.g. <div>)

Panduan ini mendokumentasikan pembungkus SyntheticEvent yang merupakan bagian dari sistem event yang dimiliki oleh React. Silahkan melihat panduan bagian Handling Events untuk mempelajarinya lebih lanjut.

Ikhtisar

Event handler Anda akan dioperkan SyntheticEvent, sebuah pembungkus lintas browser yang membungkus event bawaan browser. SyntheticEvent memiliki antarmuka yang sama dengan event bawaan browser, termasuk stopPropagation() dan preventDefault(), bedanya event ini bekerja secara seragam untuk lintas browser.

Jika untuk alasan tertentu Anda memerlukan event bawaan dari browser, gunakan atribut nativeEvent untuk mengaksesnya. Event sintetik berbeda dari event native di browser. Contohnya, di dalam onMouseLeave, event.nativeEvent akan merujuk kepada event mouseout. Mapping secara spesifik bukan merupakan bagian dari API publik dan dapat berubah setiap waktu. Setiap objek SyntheticEvent memiliki atribut-atribut berikut:

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

Catatan:

Sejak v0.14, mengembalikan nilai false dari event handler tidak akan menghentikan propagasi event. Sebagai gantinya, e.stopPropagation() atau e.preventDefault() perlu dipanggil secara manual, seperlunya.

Event Pooling

SyntheticEvent dikumpulkan. Hal ini berarti objek SyntheticEvent akan digunakan kembali dan isi objek akan dikosongkan setelah callback untuk event tersebut dipanggil. Hal ini dilakukan untuk mengoptimalkan kinerja. Dengan demikian, event tersebut tidak dapat diakses secara asinkron.

function onClick(event) {
  console.log(event); // => objek yang dikosongkan.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

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

  // Tidak akan berfungsi. this.state.clickEvent hanya berisi nilai kosong.
  this.setState({clickEvent: event});

  // Anda masih dapat mengekspor atribut event.
  this.setState({eventType: event.type});
}

Catatan:

Jika Anda ingin mengakses isi event secara asinkron, Anda perlu memanggil fungsi event.persist() dalam event, yang akan mengeluarkan synthetic event dari kumpulan(pool) sehingga acuan terhadap event tersebut dapat dipertahankan melalui kode pengguna.

Supported Events

React menormalisasi event agar memiliki properti yang sama di lintas browser.

Event handler di bawah dipicu oleh event dalam fase bubbling. Untuk mendaftarkan sebuah event handler dalam fase capture, tambahkan Capture pada nama event; contohnya, alih-alih menggunakan onClick, gunakan onClickCapture untuk menangani event klik dalam fase capture.

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
Other Events

Referensi

Clipboard Events

Nama-nama event:

onCopy onCut onPaste

Atribut-atribut:

DOMDataTransfer clipboardData

Composition Events

Nama-nama event:

onCompositionEnd onCompositionStart onCompositionUpdate

Atribut-atribut:

string data

Keyboard Events

Nama-nama event:

onKeyDown onKeyPress onKeyUp

Atribut-atribut:

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

Atribut key dapat diisi dengan nilai apapun yang terdokumentasi dalam DOM Level 3 Events spec.

Focus Events

Nama-nama event:

onFocus onBlur

Event fokus bekerja untuk semua elemen-elemen di React DOM, tidak hanya untuk elemen-elemen form.

Atribut-atribut:

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

Nama-nama event:

onChange onInput onInvalid onReset onSubmit

Untuk informasi lebih mengenai event onChange, lihat Forms.

Generic Events

Event names:

onError onLoad

Mouse Events

Nama-nama event:

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

Tidak seperti bubbling pada umumnya, event onMouseEnter dan onMouseLeave berkembang dari elemen yang keluar sampai elemen yang masuk dan tidak memiliki fase capture.

Atribut-atribut:

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

Nama-nama event:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Tidak seperti bubbling pada umumnya, event onPointerEnter dan onPointerLeave berkembang dari elemen yang ditinggalkan sampai elemen yang dimasuki dan tidak memiliki fase capture.

Atribut-atribut:

Seperti yang didefinisikan dalam W3 spec, event penunjuk pointer events mengembangkan event Mouse Events dengan atribut-atribut ini:

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

Catatan untuk dukungan lintas browser:

Pointer event belum didukung oleh semua browser (saat penulisan artikel ini, browser yang telah mendukung adalah: Chrome, Firefox, Edge, dan Internet Explorer). React tidak serta-merta memberikan dukungan untuk browser lain karena akan meningkatkan ukuran bundel react-dom secara signifikan.

Jika aplikasi Anda memerlukan pointer event, kami merekomendasikan Anda untuk menambah polyfill untuk pointer event dari pihak ketiga.

Selection Events

Nama-nama event:

onSelect

Touch Events

Nama-nama event:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Atribut-atribut:

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

UI Events

Nama-nama event:

onScroll

Atribut-atribut:

number detail
DOMAbstractView view

Wheel Events

Nama-nama event:

onWheel

Atribut-atribut:

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events

Nama-nama 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

Nama-nama event:

onLoad onError

Animation Events

Nama-nama event:

onAnimationStart onAnimationEnd onAnimationIteration

Atribut-atribut:

string animationName
string pseudoElement
float elapsedTime

Transition Events

Nama-nama event:

onTransitionEnd

Atribut-atribut:

string propertyName
string pseudoElement
float elapsedTime

Other Events

Nama-nama event:

onToggle

Is this page useful?Edit halaman ini