Add documentation note that x-on events are case insensitive. (#2262)

* Add note that x-on events are case insensitive.

X-on cannot listen to events with upper case characters in their names. Added a line in the documentation to mark this and to reference why.

* Add note that x-bind can work around case-insensitivity in x-on.

* Update to mention .camel helper, and to simplify x-bind reference.

packages/docs/src/en/directives/on.md

@@ -13,6 +13,8 @@ Here's an example of simple button that shows an alert when clicked.
 <button x-on:click="alert('Hello World!')">Say Hi</button>
 ```
 
+> `x-on` can only listen for events with lower case names, as HTML attribtes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use  [`x-bind`](/directives/bind.md#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).
+
 <a name="shorthand-syntax"></a>
 ## Shorthand syntax