Răsfoiți Sursa

Merge pull request #465 from atomgiant/event-docs

Update x-on, $event and $dispatch docs.
Caleb Porzio 5 ani în urmă
părinte
comite
7c0263989e
1 a modificat fișierele cu 18 adăugiri și 0 ștergeri
  1. 18 0
      README.md

+ 18 - 0
README.md

@@ -301,6 +301,12 @@ Boolean attributes are supported as per the [HTML specification](https://html.sp
 
 If any data is modified in the expression, other element attributes "bound" to this data, will be updated.
 
+> Note: You can also specify a Javascript function name
+
+**Example:** `<button x-on:click="myFunction"></button>`
+
+This is equivalent to: `<button x-on:click="myFunction($event)"></button>`
+
 **`keydown` modifiers**
 
 **Example:** `<input type="text" x-on:keydown.escape="open = false">`
@@ -562,6 +568,12 @@ These behave exactly like VueJs's transition directives, except they have differ
 
 `$event` is a magic property that can be used within an event listener to retrieve the native browser "Event" object.
 
+> Note: The $event property is only available in the DOM.
+
+If you need to access $event inside of a JavaScript function you can pass it in directly:
+
+`<button x-on:click="myFunction($event)"></button>`
+
 ---
 
 ### `$dispatch`
@@ -588,6 +600,12 @@ You can also use `$dispatch()` to trigger data updates for `x-model` bindings. F
 </div>
 ```
 
+> Note: The $dispatch property is only available in the DOM.
+
+If you need to access $dispatch inside of a JavaScript function you can pass it in directly:
+
+`<button x-on:click="myFunction($dispatch)"></button>`
+
 ---
 
 ### `$nextTick`