More docs onFocus and onBlur events (#3044)

* More docs onFocus and onBlur events

Including more substantial documentation around the `onFocus` and `onBlur` events that aren't so common sense on first look.

* Update content/docs/reference-events.md

Co-authored-by: Darsh Shah <imdarshshah@gmail.com>

* Update reference-events.md

Adding an example of `relatedTarget` to determine orgin of onblur or onfocus events

* Update reference-events.md

* Update content/docs/reference-events.md

Fixing `onBlur` example bug.

Co-authored-by: Darsh Shah <imdarshshah@gmail.com>

* Update reference-events.md

Fixing spacing in `onBlur` `onFocus` examples and tagging them with `javascript`

* Update reference-events.md

* Update reference-events.md

* Update reference-events.md

Co-authored-by: Darsh Shah <imdarshshah@gmail.com>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

content/docs/reference-events.md

@@ -142,10 +142,84 @@ These focus events work on all elements in the React DOM, not just form elements
 
 Properties:
 
-```javascript
+```js
 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.
+
+```javascript
+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.
+
+```javascript
+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.
+
+```javascript
+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 {#form-events}