diffhtml-middleware-synthetic-events

Global event delegation middleware, avoids inline events

Usage no npm install needed!

<script type="module">
  import diffhtmlMiddlewareSyntheticEvents from 'https://cdn.skypack.dev/diffhtml-middleware-synthetic-events';
</script>

README

<±/> diffHTML Synthetic Events Middleware

Stable Version: 1.0.0-beta.22

Changes the event binding from inline event handlers like onclick = fn to use addEventListener. Hooks are attached to the body element and coordinated using event delegation.

Installation

npm install diffhtml-middleware-synthetic-events

Example

import { use, html, innerHTML } from 'diffhtml';
import syntheticEvents from 'diffhtml-middleware-synthetic-events';

use(syntheticEvents());

function render() {
  return html`
    <div onclick=${e => console.log(e)} />
  `;
}

// Binds the event on div using `addEventListener`.
innerHTML(document.body, render());

A good use case for this middleware is building a Chrome Extension where using inline event handlers is not possible. Supports non-bubbling events via the useCapture flag.