Add support for object event handlers (using handleEvent)
- `handleEvent` is checked on dispatch, like in the DOM. - Had to reorder attribute key checking so `undefined` events still got removed. - Drive-by: Optimize the initial attribute key checking a little. - Drive-by: Fix changelog v2.0.0 link in TOC.
This commit is contained in:
Isiah Meadows
parent
dbbdb0664a
commit
2c92d84058
3 changed files with 200 additions and 11 deletions
|
|
@ -472,13 +472,11 @@ module.exports = function($window) {
|
|||
}
|
||||
}
|
||||
function setAttr(vnode, key, old, value, ns) {
|
||||
if (key === "key" || key === "is" || isLifecycleMethod(key)) return
|
||||
if (key[0] === "o" && key[1] === "n") return updateEvent(vnode, key, value)
|
||||
if ((old === value && !isFormAttribute(vnode, key)) && typeof value !== "object" || value === undefined) return
|
||||
var element = vnode.dom
|
||||
if (key === "key" || key === "is" || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object" || typeof value === "undefined" || isLifecycleMethod(key)) return
|
||||
var nsLastIndex = key.indexOf(":")
|
||||
if (nsLastIndex > -1 && key.substr(0, nsLastIndex) === "xlink") {
|
||||
element.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(nsLastIndex + 1), value)
|
||||
}
|
||||
else if (key[0] === "o" && key[1] === "n" && typeof value === "function") updateEvent(vnode, key, value)
|
||||
if (key.slice(0, 6) === "xlink:") element.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(6), value)
|
||||
else if (key === "style") updateStyle(element, old, value)
|
||||
else if (key in element && !isAttribute(key) && ns === undefined && !isCustomElement(vnode)) {
|
||||
if (key === "value") {
|
||||
|
|
@ -587,13 +585,15 @@ module.exports = function($window) {
|
|||
function EventDict() {}
|
||||
EventDict.prototype = Object.create(null)
|
||||
EventDict.prototype.handleEvent = function (ev) {
|
||||
this["on" + ev.type].call(ev.target, ev)
|
||||
var handler = this["on" + ev.type]
|
||||
if (typeof handler === "function") handler.call(ev.target, ev)
|
||||
else if (typeof handler.handleEvent === "function") handler.handleEvent(ev)
|
||||
if (typeof onevent === "function") onevent.call(ev.target, ev)
|
||||
}
|
||||
|
||||
//event
|
||||
function updateEvent(vnode, key, value) {
|
||||
if (typeof value === "function") {
|
||||
if (typeof value === "function" || value != null && typeof value === "object") {
|
||||
if (vnode.events == null) vnode.events = new EventDict()
|
||||
if (vnode.events[key] === value) return
|
||||
if (vnode.events[key] == null) vnode.dom.addEventListener(key.slice(2), vnode.events, false)
|
||||
|
|
|
|||
|
|
@ -33,7 +33,27 @@ o.spec("event", function() {
|
|||
o(onevent.args[0].type).equals("click")
|
||||
o(onevent.args[0].target).equals(div.dom)
|
||||
})
|
||||
|
||||
|
||||
o("handles click EventListener object", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var div = {tag: "div", attrs: {onclick: listener}}
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [div])
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
o(spy.this).equals(listener)
|
||||
o(spy.args[0].type).equals("click")
|
||||
o(spy.args[0].target).equals(div.dom)
|
||||
o(onevent.callCount).equals(1)
|
||||
o(onevent.this).equals(div.dom)
|
||||
o(onevent.args[0].type).equals("click")
|
||||
o(onevent.args[0].target).equals(div.dom)
|
||||
})
|
||||
|
||||
o("removes event", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onclick: spy}}
|
||||
|
|
@ -45,7 +65,130 @@ o.spec("event", function() {
|
|||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes event when null", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onclick: spy}}
|
||||
var updated = {tag: "a", attrs: {onclick: null}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes event when undefined", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {onclick: spy}}
|
||||
var updated = {tag: "a", attrs: {onclick: undefined}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes event added via addEventListener when null", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {ontouchstart: spy}}
|
||||
var updated = {tag: "a", attrs: {ontouchstart: null}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("TouchEvents")
|
||||
e.initEvent("touchstart", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes event added via addEventListener", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {ontouchstart: spy}}
|
||||
var updated = {tag: "a", attrs: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("TouchEvents")
|
||||
e.initEvent("touchstart", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes event added via addEventListener when undefined", function() {
|
||||
var spy = o.spy()
|
||||
var vnode = {tag: "a", attrs: {ontouchstart: spy}}
|
||||
var updated = {tag: "a", attrs: {ontouchstart: undefined}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("TouchEvents")
|
||||
e.initEvent("touchstart", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes EventListener object", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var vnode = {tag: "a", attrs: {onclick: listener}}
|
||||
var updated = {tag: "a", attrs: {}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes EventListener object when null", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var vnode = {tag: "a", attrs: {onclick: listener}}
|
||||
var updated = {tag: "a", attrs: {onclick: null}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
o("removes EventListener object when undefined", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var vnode = {tag: "a", attrs: {onclick: listener}}
|
||||
var updated = {tag: "a", attrs: {onclick: undefined}}
|
||||
|
||||
render(root, [vnode])
|
||||
render(root, [updated])
|
||||
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
vnode.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(0)
|
||||
})
|
||||
|
||||
|
|
@ -72,6 +215,30 @@ o.spec("event", function() {
|
|||
o(div.dom.attributes["id"].value).equals("b")
|
||||
})
|
||||
|
||||
o("fires click EventListener object only once after redraw", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var div = {tag: "div", attrs: {id: "a", onclick: listener}}
|
||||
var updated = {tag: "div", attrs: {id: "b", onclick: listener}}
|
||||
var e = $window.document.createEvent("MouseEvents")
|
||||
e.initEvent("click", true, true)
|
||||
|
||||
render(root, [div])
|
||||
render(root, [updated])
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
o(spy.this).equals(listener)
|
||||
o(spy.args[0].type).equals("click")
|
||||
o(spy.args[0].target).equals(div.dom)
|
||||
o(onevent.callCount).equals(1)
|
||||
o(onevent.this).equals(div.dom)
|
||||
o(onevent.args[0].type).equals("click")
|
||||
o(onevent.args[0].target).equals(div.dom)
|
||||
o(div.dom).equals(updated.dom)
|
||||
o(div.dom.attributes["id"].value).equals("b")
|
||||
})
|
||||
|
||||
o("handles ontransitionend", function() {
|
||||
var spy = o.spy()
|
||||
var div = {tag: "div", attrs: {ontransitionend: spy}}
|
||||
|
|
@ -90,4 +257,24 @@ o.spec("event", function() {
|
|||
o(onevent.args[0].type).equals("transitionend")
|
||||
o(onevent.args[0].target).equals(div.dom)
|
||||
})
|
||||
|
||||
o("handles transitionend EventListener object", function() {
|
||||
var spy = o.spy()
|
||||
var listener = {handleEvent: spy}
|
||||
var div = {tag: "div", attrs: {ontransitionend: listener}}
|
||||
var e = $window.document.createEvent("HTMLEvents")
|
||||
e.initEvent("transitionend", true, true)
|
||||
|
||||
render(root, [div])
|
||||
div.dom.dispatchEvent(e)
|
||||
|
||||
o(spy.callCount).equals(1)
|
||||
o(spy.this).equals(listener)
|
||||
o(spy.args[0].type).equals("transitionend")
|
||||
o(spy.args[0].target).equals(div.dom)
|
||||
o(onevent.callCount).equals(1)
|
||||
o(onevent.this).equals(div.dom)
|
||||
o(onevent.args[0].type).equals("transitionend")
|
||||
o(onevent.args[0].target).equals(div.dom)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue