<commit_before># Event Handling

To create events with Inferno, you pass a relevant event name to the props of your VNode. For example, when using JSX:

```jsx
function clickMe(event) {
  console.log('Clicked !', event);
}
```

Then you render a VNode with this event passed as props:
```
Inferno.render(
  <div onClick={ clickMe } />,
  document.getElementById('app')
);
```
Upon clicking the `<div>`, the `clickMe()` event will fire.

Like React, Inferno also uses a light-weight synthetic event system in certain places (although both event systems differ massively).
Inferno's event system provides highly efficient delegation and an event helper called linkEvent.

One major difference between Inferno and React is that Inferno does not rename events or change how they work by default. Inferno only specifies that events should be camelCase, rather than lower case. Lower case events will bypass
Inferno's event system in favour of using the native event system supplied by the browser. For example, when detecting changes on an `<input>` element, in React you'd use `onChange`, with Inferno you'd use `onInput` instead (the
native DOM event is `oninput`).

This feature is a very recent addition to Inferno, so there are only a handful of events that use Inferno's event system:
- `onClick`
- `onDblClick`
- `onMouseMove`
- `onMouseDown`
- `onMouseUp`
- `onSubmit`
- `onKeyPress`
- `onKeyDown`
- `onKeyUp`
- `onInput`
- `onChange`<commit_msg>For A11Y purpose, change the clickable div into a button<commit_after># Event Handling

To create events with Inferno, you pass a relevant event name to the props of your VNode. For example, when using JSX:

```jsx
function clickMe(event) {
  console.log('Clicked !', event);
}
```

Then you render a VNode with this event passed as props:
```
Inferno.render(
  <button onClick={ clickMe }> Click Here </button>,
  document.getElementById('app')
);
```
Upon clicking the `<button>`, the `clickMe()` event will fire.

Like React, Inferno also uses a light-weight synthetic event system in certain places (although both event systems differ massively).
Inferno's event system provides highly efficient delegation and an event helper called linkEvent.

One major difference between Inferno and React is that Inferno does not rename events or change how they work by default. Inferno only specifies that events should be camelCase, rather than lower case. Lower case events will bypass
Inferno's event system in favour of using the native event system supplied by the browser. For example, when detecting changes on an `<input>` element, in React you'd use `onChange`, with Inferno you'd use `onInput` instead (the
native DOM event is `oninput`).

This feature is a very recent addition to Inferno, so there are only a handful of events that use Inferno's event system:
- `onClick`
- `onDblClick`
- `onMouseMove`
- `onMouseDown`
- `onMouseUp`
- `onSubmit`
- `onKeyPress`
- `onKeyDown`
- `onKeyUp`
- `onInput`
- `onChange`
{'fraction_non_alphanumeric': 0.08530006743088335, 'fraction_numerical': 0.0006743088334457181, 'mean_word_length': 4.7057692307692305, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 10, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4533653', 'n_tokens_mistral': 871, 'n_tokens_neox': 831, 'n_words': 409}