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 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 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ặce.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});
}
Lưu ý:
Nếu bạn muốn giữ lại thuộc tính của event sau khi chạy hàm xử lý, bạn phải gọi
event.persist()
để tách event object ra (event object mới sẽ được tạo) và giữ lại các thuộc tính của nó.
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
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
Thuộc tính:
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