Event Failures

[him2him2]

Related: #choojs/nanomorph#89

I created tests for the events listed in https://github.com/choojs/nanomorph/blob/master/lib/events.js#L32

The following events fail to parse from HTML attribute. I believe this is a problem in bel. But I am not sure where this problem originates.

• onfocusin
• onfocusout
• ontouchcancel
• ontouchend
• ontouchmove
• ontouchstart
• onunload

The first two are listed as problematic and fail

Note: these event may not work as expected in Chrome, Safari and Opera 15+ using the JavaScript HTML DOM syntax. However, it should work as an HTML attribute and by using the addEventListener() method (See syntax examples below).

onfocusin
https://www.w3schools.com/jsref/event_onfocusin.asp

onfocusout
https://www.w3schools.com/jsref/event_onfocusout.asp

These events are listed as Editor's Draft(Non-stable version), but should work in chrome. They also fail.

ontouchcancel
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchcancel
https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel

ontouchend
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchend
https://developer.mozilla.org/en-US/docs/Web/Events/touchend

ontouchmove
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchmove
https://developer.mozilla.org/en-US/docs/Web/Events/touchmove

ontouchstart
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchstart
https://developer.mozilla.org/en-US/docs/Web/Events/touchstart

This event should only work on the body tag, but also seems to fail.
onunload
https://www.w3schools.com/jsref/event_onunload.asp
Should only work on the body tag. Testing on the body tag fails.

I will submit a pull request that contains the event tests.

Note: Failing tests have been commented out.

[AutoSponge]

@him2him2 I think you're right. I also believe it's a problem in bel which prevents the use of custom events as well. For instance, hyperHTML uses addEventListener to attach events after parsing out the on prefix.

bel does not do this so projects based on bel can't pass the declarative-event tests at https://custom-elements-everywhere.com/. So far, I've tested bel, choo and gza but none pass.

[yoshuawuyts]

I also believe it's a problem in bel which prevents the use of custom events as well. For instance, hyperHTML uses addEventListener to attach events after parsing out the on prefix.

If we were to use this method, how would we access the event handlers? Right now we can iterate over the list, and access it as for example an onclick property on the object. Afaik using event listeners prohibits that.

An idea might be to only attach listeners that aren't registered in the list through .addEventListener(), but then we'd have diverging behavior because the listeners cannot be copied over.

Ideally the DOM spec would allow enumerating listeners, but afaik it's not possible at the moment. I'm keen for someone to prove me wrong though, as I agree using .addEventListener would definitely be a preferred method.

[AutoSponge]

I've been trying some stuff out with hyperHTML. I noticed it's using handleEvent (blog post here). You might be able to keep all handlers in one collection and only copy the collection by reference instead of doing the physical copy because every element would have a handleEvent method with a default noop handler.

[yoshuawuyts]

@AutoSponge that's a really cool article! We should try out some stuff with that for sure!

[goto-bus-stop]

Woah that is super neat! Thanks for sharing :D

[bcomnes]

@AutoSponge Thats a great blogpost! Would you be willing to talk about this some more in irc sometime? https://www.irccloud.com/invite?channel=%23hypermodules&hostname=irc.freenode.net&port=6697&ssl=1 (ping bret) . This seems super useful for https://github.com/choojs/nanocomponent as well

[AutoSponge]

I'll work on a branch and see if I can make it work then we might have something to talk about :)

[bcomnes]

Issue in OP could also be related to https://github.com/choojs/nanomorph/blob/master/lib/events.js