diff --git a/docs/hyperscript.md b/docs/hyperscript.md index 8ebe297b..38a6808d 100644 --- a/docs/hyperscript.md +++ b/docs/hyperscript.md @@ -181,7 +181,7 @@ Mithril does not attempt to add units to number values. ### 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 function doSomething(e) { @@ -191,6 +191,38 @@ function doSomething(e) { 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 diff --git a/render/render.js b/render/render.js index df26a1df..b9a54b08 100644 --- a/render/render.js +++ b/render/render.js @@ -558,7 +558,7 @@ module.exports = function($window) { function updateEvent(vnode, key, value) { var element = vnode.dom var callback = typeof onevent !== "function" ? value : function(e) { - var result = value.call(element, e) + var result = value.call(element, e, vnode) onevent.call(element, e) return result } diff --git a/render/tests/test-event.js b/render/tests/test-event.js index 31d2d012..6b75397e 100644 --- a/render/tests/test-event.js +++ b/render/tests/test-event.js @@ -28,6 +28,7 @@ o.spec("event", function() { o(spy.this).equals(div.dom) o(spy.args[0].type).equals("click") o(spy.args[0].target).equals(div.dom) + o(spy.args[1]).equals(div) o(onevent.callCount).equals(1) o(onevent.this).equals(div.dom) o(onevent.args[0].type).equals("click") @@ -64,6 +65,7 @@ o.spec("event", function() { o(spy.this).equals(div.dom) o(spy.args[0].type).equals("click") o(spy.args[0].target).equals(div.dom) + o(spy.args[1]).equals(div) o(onevent.callCount).equals(1) o(onevent.this).equals(div.dom) o(onevent.args[0].type).equals("click") @@ -85,6 +87,7 @@ o.spec("event", function() { o(spy.this).equals(div.dom) o(spy.args[0].type).equals("transitionend") o(spy.args[0].target).equals(div.dom) + o(spy.args[1]).equals(div) o(onevent.callCount).equals(1) o(onevent.this).equals(div.dom) o(onevent.args[0].type).equals("transitionend")