diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 0cadd3728..13cbb8955 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -6,13 +6,13 @@ layout: docs category: Reference --- -This reference guide documents the `SyntheticEvent` wrapper that forms part of React's Event System. See the [Handling Events](/docs/handling-events.html) guide to learn more. +Ez a referencia útmutató a `SyntheticEvent` csomagolót dokumentálja, ami a React Eseményrendszere egy részét képzi. Ha többet szeretnél tanulni erről, nézd meg az [Események kezelése](/docs/handling-events.html) útmutatót. -## Overview {#overview} +## Áttekintés {#overview} -Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers. +Az eseménykezelőidnek a `SyntheticEvent` példányai lesznek átadva, ami egy böngészőtől független konténer, a böngésző natív eseményei körül. Ugyanazzal az interfésszel rendelkezik mint a natív események, a `stopPropagation()`-t és a `preventDefault()`-ot beleértve, kivéve, hogy ezek az események a böngészőktől függetlenül egységesen működnek. -If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it. Every `SyntheticEvent` object has the following attributes: +Ha azon kapod magad, hogy valamiért szükséged van az egyik mögöttes böngészőeseményre, egyszerűen használd a `nativeEvent` attribútumot, hogy azt kapd. Minden `SyntheticEvent` objektum a következő attribútumokkal rendelkezik: ```javascript boolean bubbles @@ -32,19 +32,19 @@ number timeStamp string type ``` -> Note: +> Megjegyzés: > -> As of v0.14, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate. +> A v0.14-től kezdve `false` érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az `e.stopPropagation()`-t, vagy az `e.preventDefault`-ot, attól függően melyik a helyes a te esetedben. -### Event Pooling {#event-pooling} +### Események összegyűjtése {#event-pooling} -The `SyntheticEvent` is pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event callback has been invoked. -This is for performance reasons. -As such, you cannot access the event in an asynchronous way. +A `SyntheticEvent` egy közös készletben van. Ez azt jelenti, hogy a `SyntheticEvent` objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után. +Ez a teljesítmény növelése érdekében történik. +Így az eseményhez nem férhetsz aszinkron módon. ```javascript function onClick(event) { - console.log(event); // => nullified object. + console.log(event); // => kinullázott objektum. console.log(event.type); // => "click" const eventType = event.type; // => "click" @@ -53,55 +53,55 @@ function onClick(event) { console.log(eventType); // => "click" }, 0); - // Won't work. this.state.clickEvent will only contain null values. + // Nem fog működni. A this.state.clickEvent csak null értékeket fog tartalmazni. this.setState({clickEvent: event}); - // You can still export event properties. + // Az esemény értékeket még így is ki tudod exportálni. this.setState({eventType: event.type}); } ``` -> Note: +> Megjegyzés: > -> If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code. - -## Supported Events {#supported-events} - -React normalizes events so that they have consistent properties across different browsers. - -The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase. - -- [Clipboard Events](#clipboard-events) -- [Composition Events](#composition-events) -- [Keyboard Events](#keyboard-events) -- [Focus Events](#focus-events) -- [Form Events](#form-events) -- [Generic Events](#generic-events) -- [Mouse Events](#mouse-events) -- [Pointer Events](#pointer-events) -- [Selection Events](#selection-events) -- [Touch Events](#touch-events) -- [UI Events](#ui-events) -- [Wheel Events](#wheel-events) -- [Media Events](#media-events) -- [Image Events](#image-events) -- [Animation Events](#animation-events) -- [Transition Events](#transition-events) -- [Other Events](#other-events) +> Ha szeretnél az események tulajdonságaihoz aszinkron módon hozzáférni, meg kell hogy hívd az `event.persist()` metódust az eseményen, ami eltávolítja a szintetikus eseményt a medencéből és lehetővé teszi az eseményre mutató hivatkozások megtartását felhasználói kóddal. + +## Támogatott események {#supported-events} + +A React normalizálja az eseményeket annak érdekében, hogy a tulajdonságaik egységesek legyenek böngészőtől függetlenül. + +Az alábbi eseménykezelők egy esemény által lettek elindítva a "bubbling" fázisban. Egy eseménykezelő regisztrálásához a "capture" fázisban add hozzá a `Capture` szót az esemény nevéhez; például az `onClick` helyett használd az `onClickCapture`-t kattintási események kezeléséhez a capture fázisban. + +- [Vágólapesemények](#clipboard-events) +- [Kompozíció-események](#composition-events) +- [Billentyűzet-események](#keyboard-events) +- [Fókuszálás-események](#focus-events) +- [Űrlapesemények](#form-events) +- [Egéresemények](#mouse-events) +- [Általános események](#generic-events) +- [Mutatóesemények](#pointer-events) +- [Kiválasztás-események](#selection-events) +- [Érintőesemények](#touch-events) +- [Felhasználói felület eseményei](#ui-events) +- [Görgőesemények](#wheel-events) +- [Médiaesemények](#media-events) +- [Képesemények](#image-events) +- [Animáció-események](#animation-events) +- [Átmenet-események](#transition-events) +- [Egyéb események](#other-events) * * * -## Reference {#reference} +## Referencia {#reference} -### Clipboard Events {#clipboard-events} +### Vágólapesemények {#clipboard-events} -Event names: +Eseménynevek: ``` onCopy onCut onPaste ``` -Properties: +Tulajdonságok: ```javascript DOMDataTransfer clipboardData @@ -109,15 +109,15 @@ DOMDataTransfer clipboardData * * * -### Composition Events {#composition-events} +### Kompozíció-események {#composition-events} -Event names: +Eseménynevek: ``` onCompositionEnd onCompositionStart onCompositionUpdate ``` -Properties: +Tulajdonságok: ```javascript string data @@ -126,15 +126,15 @@ string data * * * -### Keyboard Events {#keyboard-events} +### Billentyűzet-események {#keyboard-events} -Event names: +Eseménynevek: ``` onKeyDown onKeyPress onKeyUp ``` -Properties: +Tulajdonságok: ```javascript boolean altKey @@ -151,21 +151,21 @@ boolean shiftKey number which ``` -The `key` property can take any of the values documented in the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). +A `key` tulajdonság bármilyen értéket felvehet, ami szerepel a [3-as szintű DOM események specifikációjában](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). * * * -### Focus Events {#focus-events} +### Fókuszálás-események {#focus-events} -Event names: +Eseménynevek: ``` onFocus onBlur ``` -These focus events work on all elements in the React DOM, not just form elements. +Ezek a fókuszálás-események minden elemen működnek a React DOM-ban, nem csak az űrlapelemeken. -Properties: +Tulajdonságok: ```javascript DOMEventTarget relatedTarget @@ -173,21 +173,22 @@ DOMEventTarget relatedTarget * * * -### Form Events {#form-events} +### Űrlapesemények {#form-events} -Event names: +Eseménynevek: ``` onChange onInput onInvalid onReset onSubmit ``` +Még több információért az onChange eseményről, nézd meg az [Űrlapok](/docs/forms.html) fejezetet. For more information about the onChange event, see [Forms](/docs/forms.html). * * * -### Generic Events {#generic-events} +### Általános események {#generic-events} -Event names: +Eseménynevek: ``` onError onLoad @@ -195,9 +196,9 @@ onError onLoad * * * -### Mouse Events {#mouse-events} +### Egéresemények {#mouse-events} -Event names: +Eseménynevek: ``` onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit @@ -205,9 +206,9 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ``` -The `onMouseEnter` and `onMouseLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase. +Az `onMouseEnter` és `onMouseLeave` események a normális bubbling helyett abból az elemből terjednek, amibe épp egérrel beleléptek, afelé az elem felé, amibe épp beleléptek, és nincs capture fázisuk. -Properties: +Tulajdonságok: ```javascript boolean altKey @@ -228,20 +229,20 @@ boolean shiftKey * * * -### Pointer Events {#pointer-events} +### Mutatóesemények {#pointer-events} -Event names: +Eseménynevek: ``` onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut ``` -The `onPointerEnter` and `onPointerLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase. +Az `onPointerEnter` és `onPointerLeave` események a normális bubbling helyett abból az elemből terjednek, amibe épp egérrel beleléptek, afelé az elem felé, amibe épp beleléptek, és nincs capture fázisuk. -Properties: +Tulajdonságok: -As defined in the [W3 spec](https://www.w3.org/TR/pointerevents/), pointer events extend [Mouse Events](#mouse-events) with the following properties: +A [W3 specifikációt](https://www.w3.org/TR/pointerevents/) követve, a mutatóesemények az [Egéreseményeket](#mouse-events) terjesztik ki a következő tulajdonságokkal: ```javascript number pointerId @@ -256,17 +257,17 @@ string pointerType boolean isPrimary ``` -A note on cross-browser support: +Egy megjegyzés böngészők közötti támogatásról: -Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of `react-dom`. +A mutatóesemények még nem minden böngésző által támogatottak (ennek a cikknek az írása közben a következő böngészők támogatják: Chrome, Firefox, Edge, és Internet Explorer). A React szándékosan nem használ polyfillt más böngészők támogatásához, mert egy standardhoz idomuló polyfill jelentősen növelné a `react-dom` csomagméretét. -If your application requires pointer events, we recommend adding a third party pointer event polyfill. +Ha az alkalmazásod mutatóeseményeket használ, azt ajánljuk, hogy adj hozzá egy harmadik féltől származó esemény polyfillt. * * * -### Selection Events {#selection-events} +### Kiválasztás-események {#selection-events} -Event names: +Eseménynevek: ``` onSelect @@ -274,15 +275,15 @@ onSelect * * * -### Touch Events {#touch-events} +### Érintőesemények {#touch-events} -Event names: +Eseménynevek: ``` onTouchCancel onTouchEnd onTouchMove onTouchStart ``` -Properties: +Tulajdonságok: ```javascript boolean altKey @@ -297,15 +298,15 @@ DOMTouchList touches * * * -### UI Events {#ui-events} +### Felhasználói felület eseményei {#ui-events} -Event names: +Eseménynevek: ``` onScroll ``` -Properties: +Tulajdonságok: ```javascript number detail @@ -314,15 +315,15 @@ DOMAbstractView view * * * -### Wheel Events {#wheel-events} +### Görgőesemények {#wheel-events} -Event names: +Eseménynevek: ``` onWheel ``` -Properties: +Tulajdonságok: ```javascript number deltaMode @@ -333,9 +334,9 @@ number deltaZ * * * -### Media Events {#media-events} +### Médiaesemények {#media-events} -Event names: +Eseménynevek: ``` onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted @@ -346,9 +347,9 @@ onTimeUpdate onVolumeChange onWaiting * * * -### Image Events {#image-events} +### Képesemények {#image-events} -Event names: +Eseménynevek: ``` onLoad onError @@ -356,15 +357,15 @@ onLoad onError * * * -### Animation Events {#animation-events} +### Animáció-események {#animation-events} -Event names: +Eseménynevek: ``` onAnimationStart onAnimationEnd onAnimationIteration ``` -Properties: +Tulajdonságok: ```javascript string animationName @@ -374,15 +375,15 @@ float elapsedTime * * * -### Transition Events {#transition-events} +### Átmenet-események {#transition-events} -Event names: +Eseménynevek: ``` onTransitionEnd ``` -Properties: +Tulajdonságok: ```javascript string propertyName @@ -392,9 +393,9 @@ float elapsedTime * * * -### Other Events {#other-events} +### Egyéb események {#other-events} -Event names: +Eseménynevek: ``` onToggle