Proposal: Use riot.js super easy event handlers

[ilblog]

What about this <button on:click="handleClick({ foo: bar })">click me!</button> replace with this <button onclick="handleClick({ foo: bar })">click me!</button>

[arxpoetica]

Because onclick is a native attribute and shouldn't be touched.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

[IamManchanda]

Can't it be just @click, @keyup?

or both on:click & @click with anyone working!

---

Yes Vue like!

[arxpoetica]

I say no to both [update: I meant "both" as in "two forms"]. Pick one and stick with it.

+1 to on:*

[IamManchanda]

@arxpoetica No I mean keep on:* but also keep @* as shorthand

[Rich-Harris]

At the moment, elements and components have two types of 'thing': attributes and directives (three if you count spread attributes separately, I suppose). I don't personally think it's worth adding another type of thing that increases the complexity of the language for the sake of saving two characters. It's not a good idea to have multiple ways of doing something, because it creates anxiety in users, who end up asking themselves if one is 'correct', and if there are any differences in behaviour that they haven't understood. It just means more documentation, and the liberal use of @ is something that many people would find off-putting when first seeing HTMLx.

onclick is a native attribute whose use is discouraged (because it runs in the global scope, etc), so that's not really an option.

[vedam]

In addition, isn't @ something used in other libs meaning something else (i.e. mobx @observable)?
IMO adding more confusion than value.

[jfbrennan]

Why can't HTMLx spec that onclick et al are scoped to the component? I really enjoyed coming to Riot and getting to use the real event attributes vs. idioms like v-on:click.

[arxpoetica]

@jfbrennan as Rich Harris said, "is a native attribute"—i.e., if you override the native functionality, it won't be available. Idioms are just that: deliberately meant to set things apart as, in the e"x"tra in HTMLx.