Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translation: SyntheticEvent #66

Merged
merged 25 commits into from Apr 25, 2020
Merged
Changes from 18 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
a2556bc
translation: SyntheticEvent
Jan 22, 2020
1540044
updated reference-event.md
ps0305 Jan 25, 2020
fb8fb78
Merge pull request #1 from ps0305/ps0305-patch-1
ps0305 Jan 25, 2020
302c765
Merge branch 'master' into translation-SyntheticEvent-hi
arshadkazmi42 Jan 28, 2020
78a1fc8
Update reference-events.md
ps0305 Jan 28, 2020
80342d2
Merge pull request #2 from ps0305/ps0305-patch-2
ps0305 Jan 28, 2020
03bc430
Merge branch 'master' into translation-SyntheticEvent-hi
saranshkataria Feb 3, 2020
a01ec8e
Update reference-events.md
ps0305 Feb 4, 2020
252917c
Merge pull request #3 from ps0305/ps0305-patch-3
ps0305 Feb 4, 2020
c24b2cb
Merge branch 'master' into translation-SyntheticEvent-hi
saranshkataria Feb 17, 2020
dda3647
Update reference-events.md
ps0305 Feb 17, 2020
35b8bbb
Merge pull request #4 from ps0305/ps0305-patch-4
ps0305 Feb 17, 2020
c22073c
Merge branch 'master' into translation-SyntheticEvent-hi
saranshkataria Feb 17, 2020
6743cd9
Update reference-events.md
ps0305 Feb 18, 2020
4c8eb86
Merge pull request #5 from ps0305/ps0305-patch-5
ps0305 Feb 18, 2020
4323300
Merge branch 'master' into translation-SyntheticEvent-hi
ps0305 Apr 14, 2020
69bd773
Update reference-events.md
ps0305 Apr 19, 2020
0d9cbb3
Merge pull request #6 from ps0305/ps0305-patch-6
ps0305 Apr 19, 2020
71d88cf
Update reference-events.md
ps0305 Apr 20, 2020
86f3bb6
Update reference-events.md
ps0305 Apr 20, 2020
ec05059
Merge branch 'master' into translation-SyntheticEvent-hi
saranshkataria Apr 23, 2020
6d1cbd5
Update reference-events.md
ps0305 Apr 24, 2020
1744b89
Merge pull request #7 from ps0305/ps0305-patch-7
ps0305 Apr 24, 2020
485752b
Update reference-events.md
ps0305 Apr 25, 2020
374b838
Merge pull request #8 from ps0305/ps0305-patch-8
ps0305 Apr 25, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
143 changes: 70 additions & 73 deletions content/docs/reference-events.md
Expand Up @@ -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.
यह निर्देशिका `SyntheticEvent` आवरण को निर्देशित करता है जो React इवेंट सिस्टम का एक हिस्सा है। अधिक जानने के लिए [Handling Events](/docs/handling-events.html) गाइड देखें।

## Overview {#overview}
## ओवरव्यू {#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.
आपके ईवेंट हैंडलर को `SyntheticEvent` के उदाहरण के तौर पर, ब्राउज़र के नेटिव ईवेंट के चारों ओर एक क्रॉस-ब्राउज़र रैपर दिया जाएगा। यह ब्राउज़र के नेटिव ईवेंट के समान है, जिसमें `stopPropagation()` और `preventDefault()` शामिल हैं, पर यह इवेंट्स सभी ब्राउज़रों में समान रूप से काम करते हैं।

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:
यदि किसी कारण से आप पाते हैं कि आपको अंतर्निहित ब्राउज़र इवेंट की आवश्यकता है, तो इसे प्राप्त करने के लिए `nativeEvent` एट्रिब्यूट का उपयोग करें। प्रत्येक `SyntheticEvent` ऑब्जेक्ट में निम्न विशेषताएँ होती हैं।

```javascript
boolean bubbles
Expand All @@ -32,15 +32,15 @@ number timeStamp
string type
```

> Note:
> ध्यान दें:
>
> 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.
> v0.14 से, किसी इवेंट हैंडलर द्वारा `false` लौटाने पर event propagation नहीं रुकेगा। इसके बजाय, `e.stopPropagation()` या `e.preventDefault()` को ज़रूरत के अनुसार मैन्युअल रूप से इस्तेमाल करना चाहिए।

### Event Pooling {#event-pooling}
### इवेंट इकट्ठा करना {#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.
`SyntheticEvent` को इकट्ठा किया जाता है। इसका मतलब यह है कि `SyntheticEvent` ऑब्जेक्ट का पुन: उपयोग किया जाएगा और ईवेंट कॉलबैक लागू होने के बाद सभी प्रॉपर्टीज को nullify कर दिया जाता है।
यह परफॉरमेंस कारणों से है।
जैसे की, हम ईवेंट को asynchronous तरीके से एक्सेस नहीं कर सकते हैं।

```javascript
function onClick(event) {
Expand All @@ -61,15 +61,15 @@ function onClick(event) {
}
```

> Note:
> ध्यान दें:
>
> 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.
> यदि आप asynchronous तरीके से इवेंट के प्रॉपर्टीज का उपयोग करना चाहते हैं, तो आपको इवेंट पर `event.persist()` को कॉल करना चाहिए, जो पूल से सिंथेटिक इवेंट को हटा देगा और यूजर कोड द्वारा इवेंट के रेफरेन्सेस को बनाये रखेगा।

## Supported Events {#supported-events}
## समर्थित इवेंट्स {#supported-events}

React normalizes events so that they have consistent properties across different browsers.
React इवेंट्स को सामान्य करता है ताकि उनके विभिन्न ब्राउज़रों में सुसंगत गुण हों।
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

सामान्य could be left as is since the translation changes the meaning

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

normalizes is different than normal?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant for it to read normalizes, not सामान्य and not नार्मल . Either in english/hindi works


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.
नीचे दिए गए घटना संचालकों को bubbling चरण में एक इवेंट द्वारा ट्रिगर किया गया है। कैप्चर चरण के लिए एक ईवेंट हैंडलर रजिस्टर करने के लिए, `Capture` को ईवेंट नाम में जोड़ें, उदाहरण के लिए, `onClick` का उपयोग करने के बजाय, आप कैप्चर/पकड़ना चरण में click इवेंट को संभालने के लिए `onClickCapture` का उपयोग करेंगे।
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

- [Clipboard Events](#clipboard-events)
- [Composition Events](#composition-events)
Expand All @@ -91,33 +91,33 @@ The event handlers below are triggered by an event in the bubbling phase. To reg

* * *

## Reference {#reference}
## संदर्भ {#reference}

### Clipboard Events {#clipboard-events}
### क्लिपबोर्ड इवेंट्स {#clipboard-events}

Event names:
ईवेंट के नाम:

```
onCopy onCut onPaste
```

Properties:
प्रॉपर्टीज:

```javascript
DOMDataTransfer clipboardData
```

* * *

### Composition Events {#composition-events}
### कम्पोजीशन इवेंट्स {#composition-events}

Event names:
ईवेंट के नाम:

```
onCompositionEnd onCompositionStart onCompositionUpdate
```

Properties:
प्रॉपर्टीज:

```javascript
string data
Expand All @@ -126,15 +126,15 @@ string data

* * *

### Keyboard Events {#keyboard-events}
### कीबोर्ड इवेंट्स {#keyboard-events}

Event names:
ईवेंट के नाम:

```
onKeyDown onKeyPress onKeyUp
```

Properties:
प्रॉपर्टीज:

```javascript
boolean altKey
Expand All @@ -151,63 +151,60 @@ 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).
`key` प्रॉपर्टीज, [DOM स्तर 3 इवेंट्स विनिर्देश](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) में प्रलेखित किसी भी वैल्यू को ले सकती है।
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

* * *

### Focus Events {#focus-events}
### फोकस इवेंट्स {#focus-events}

Event names:
ईवेंट के नाम:

```
onFocus onBlur
```

These focus events work on all elements in the React DOM, not just form elements.
ये फ़ोकस इवेंट React DOM में सभी एलिमेंट्स पर काम करते हैं, न कि केवल फार्म एलिमेंट्स।
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

Properties:
प्रॉपर्टीज:

```javascript
DOMEventTarget relatedTarget
```

* * *

### Form Events {#form-events}
### फार्म इवेंट्स {#form-events}

Event names:
ईवेंट के नाम:

```
onChange onInput onInvalid onReset onSubmit
```

For more information about the onChange event, see [Forms](/docs/forms.html).
onChange ईवेंट के बारे में अधिक जानकारी के लिए [फॉर्म्स](/docs/forms.html) देखें।

* * *

### Generic Events {#generic-events}
### सामान्य इवेंट्स {#generic-events}

Event names:
ईवेंट के नाम:

```
onError onLoad
```

* * *

### Mouse Events {#mouse-events}
### माउस इवेंट्स {#mouse-events}

Event names:
ईवेंट के नाम:
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

```
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
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.
`onMouseEnter` और `onMouseLeave` ईवेंट उस एलिमेंट से प्रचारित होते हैं जिसे साधारण bubbling के बजाय किसी एक में छोड़ा जा रहा है और कैप्चर फेज नहीं है।
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

Properties:
प्रॉपर्टीज:

```javascript
boolean altKey
Expand All @@ -228,20 +225,20 @@ boolean shiftKey

* * *

### Pointer Events {#pointer-events}
### पॉइंटर इवेंट्स {#pointer-events}

Event names:
ईवेंट के नाम:
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

```
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.
`onPointerEnter` और `onPointerLeave` ईवेंट उस एलिमेंट से प्रचारित होते हैं जिसे साधारण bubbling के बजाय एक में छोड़ा जा रहा है और कैप्चर फेज नहीं है।
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

Properties:
प्रॉपर्टीज:

As defined in the [W3 spec](https://www.w3.org/TR/pointerevents/), pointer events extend [Mouse Events](#mouse-events) with the following properties:
जैसा कि [W3 विनिर्देश](https://www.w3.org/TR/pointerevents/) में परिभाषित किया गया है, पॉइंटर इवेंट्स निम्नलिखित गुणों के साथ [माउस इवेंट्स](#mouse-events) का विस्तार करती हैं:
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

```javascript
number pointerId
Expand All @@ -256,33 +253,33 @@ string pointerType
boolean isPrimary
```

A note on cross-browser support:
क्रॉस-ब्राउज़र समर्थन पर ध्यान दें:
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

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`.
पॉइंटर ईवेंट्स अभी तक हर ब्राउज़र में समर्थित नहीं हैं (इस लेख को लिखने के समय, समर्थित ब्राउज़र में शामिल हैं: Chrome, Firefox, Edge और Internet Explorer) React जानबूझकर अन्य ब्राउज़रों के लिए पॉलीफिल समर्थन नहीं करता है क्योंकि एक मानक-अनुरूप पॉलीफिल `react-dom` के बंडल आकार में काफी वृद्धि करेगा।
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

If your application requires pointer events, we recommend adding a third party pointer event polyfill.
यदि आपके एप्लिकेशन को पॉइंटर इवेंट्स की आवश्यकता है, तो हम तीसरे पक्ष के पॉइंटर इवेंट्स पॉलीफिल को जोड़ने की सलाह देते हैं।
saranshkataria marked this conversation as resolved.
Show resolved Hide resolved

* * *

### Selection Events {#selection-events}
### चयन इवेंट्स {#selection-events}

Event names:
ईवेंट के नाम:

```
onSelect
```

* * *

### Touch Events {#touch-events}
### टच इवेंट्स {#touch-events}

Event names:
ईवेंट के नाम:

```
onTouchCancel onTouchEnd onTouchMove onTouchStart
```

Properties:
प्रॉपर्टीज:

```javascript
boolean altKey
Expand All @@ -297,15 +294,15 @@ DOMTouchList touches

* * *

### UI Events {#ui-events}
### UI इवेंट्स {#ui-events}

Event names:
ईवेंट के नाम:

```
onScroll
```

Properties:
प्रॉपर्टीज:

```javascript
number detail
Expand All @@ -314,15 +311,15 @@ DOMAbstractView view

* * *

### Wheel Events {#wheel-events}
### व्हील इवेंट्स {#wheel-events}

Event names:
ईवेंट के नाम:

```
onWheel
```

Properties:
प्रॉपर्टीज:

```javascript
number deltaMode
Expand All @@ -333,9 +330,9 @@ number deltaZ

* * *

### Media Events {#media-events}
### मीडिया इवेंट्स {#media-events}

Event names:
ईवेंट के नाम:

```
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
Expand All @@ -346,25 +343,25 @@ onTimeUpdate onVolumeChange onWaiting

* * *

### Image Events {#image-events}
### इमेज इवेंट्स {#image-events}

Event names:
ईवेंट के नाम:

```
onLoad onError
```

* * *

### Animation Events {#animation-events}
### एनीमेशन इवेंट्स {#animation-events}

Event names:
ईवेंट के नाम:

```
onAnimationStart onAnimationEnd onAnimationIteration
```

Properties:
प्रॉपर्टीज:

```javascript
string animationName
Expand All @@ -374,15 +371,15 @@ float elapsedTime

* * *

### Transition Events {#transition-events}
### ट्रांज़िशन इवेंट्स {#transition-events}

Event names:
ईवेंट के नाम:

```
onTransitionEnd
```

Properties:
प्रॉपर्टीज:

```javascript
string propertyName
Expand All @@ -392,9 +389,9 @@ float elapsedTime

* * *

### Other Events {#other-events}
### अन्य इवेंट्स {#other-events}

Event names:
ईवेंट के नाम:

```
onToggle
Expand Down