Package Exports

diffhtml-middleware-synthetic-events
diffhtml-middleware-synthetic-events/dist/cjs/index.js
diffhtml-middleware-synthetic-events/dist/es/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (diffhtml-middleware-synthetic-events) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<±/> diffHTML Synthetic Events Middleware

Stable Version: 1.0.0-beta.30

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.