浏览代码

Merge pull request #465 from atomgiant/event-docs

Update x-on, $event and $dispatch docs.
Caleb Porzio 5 年之前
父节点
当前提交
7c0263989e
共有 1 个文件被更改,包括 18 次插入0 次删除
  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.
 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**
 **`keydown` modifiers**
 
 
 **Example:** `<input type="text" x-on:keydown.escape="open = false">`
 **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.
 `$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`
 ### `$dispatch`
@@ -588,6 +600,12 @@ You can also use `$dispatch()` to trigger data updates for `x-model` bindings. F
 </div>
 </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`
 ### `$nextTick`