Clarify events, document extra vnode property
This commit is contained in:
parent
81b7ff56ee
commit
a92ffb3077
1 changed files with 33 additions and 1 deletions
|
|
@ -181,7 +181,7 @@ Mithril does not attempt to add units to number values.
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
Mithril supports event handler binding for all DOM events, including events whose specs do not define an `on${event}` property, such as `touchstart`
|
Mithril supports event handler binding for all DOM events, using `addEventListener` under the hood to add events in case they don't have a corresponding `on${event}` property, such as the native `touchstart` or third-party events like Bootstrap's `show.bs.modal`.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
function doSomething(e) {
|
function doSomething(e) {
|
||||||
|
|
@ -191,6 +191,38 @@ function doSomething(e) {
|
||||||
m("div", {onclick: doSomething})
|
m("div", {onclick: doSomething})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
You may access the element itself through `this` like so, which is useful for things like form validation:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function submit(e) {
|
||||||
|
this.validate()
|
||||||
|
m.request("api/form-endpoint", {
|
||||||
|
method: "POST",
|
||||||
|
data: new FormData(this),
|
||||||
|
background: true
|
||||||
|
})
|
||||||
|
.then(function () {
|
||||||
|
m.route.set("/form-submit")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
m("form", {onsubmit: submit}, [
|
||||||
|
// ...
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
It also provides access to the event's own literal vnode via `vnode`, so you may easily access its `attrs` and `children` through it, from an external function.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function handleClick(e, vnode) {
|
||||||
|
vnode.attrs.context.validateValue(this.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
m("div", [
|
||||||
|
m("input", {type: "text", context: this, onclick: handleClick})
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Properties
|
### Properties
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue