Bean: Framework-Agnostic Event Manager

Common errors

• Uncaught TypeError: bean.on is not a function

  cause The 'bean' object was not correctly loaded or is not available in the global scope/module context.
  fix Ensure the 'bean' script is included in your HTML before your script, or that `require('bean')` is correctly used in a CommonJS environment. For modern front-end development, this package is not recommended.

• Delegated event not firing for focus/blur on child elements.

  cause The `focus`, `blur`, and `submit` events do not naturally bubble in the DOM, preventing event delegation with Bean (and most other event libraries).
  fix Attach event listeners directly to the specific elements that need to react to `focus` or `blur`. For `submit`, attach the listener directly to the `<form>` element.

Warnings

• deprecated The `bean.add()` method, while still present in v1.0.15, is a legacy handler-adding interface from pre-v1.x. Its argument order differs from `bean.on()` for delegated events and it may have undefined behavior in modern contexts due to the package's abandonment.
  Fix: Always use `bean.on()` for attaching event listeners. Example: `bean.on(element, 'click', handler)`.
• gotcha Event delegation using `bean.on()` does not work for `focus`, `blur`, and `submit` events due to browser DOM model limitations. These events will not bubble or delegate as expected.
  Fix: For `focus` and `blur` events, attach listeners directly to the target elements or consider using `focusin` and `focusout` if supported by the environment and appropriate for your use case. For `submit`, attach directly to the `<form>` element.
• breaking When migrating from pre-v1.x versions of Bean to v1.x (including 1.0.15), the behavior of namespace matching for `bean.fire()` and `bean.off()` changed from an 'OR' logic to an 'AND' logic. This means `bean.fire(element, 'click.fat.foo')` will only trigger handlers explicitly bound to *both* 'fat' and 'foo' namespaces.
  Fix: Review existing code using namespaced events with `bean.fire()` or `bean.off()` and adjust namespace specificity or event binding if it relied on the 'OR' matching behavior. Ensure handlers are bound with the exact namespaces intended for firing/removal.

Install

• npm install bean npm
• yarn add bean yarn
• pnpm add bean pnpm

Imports

• bean
  wrong:

  import bean from 'bean'

  correct:

  const bean = require('bean')

  Primarily designed for CommonJS or global script inclusion; ESM imports are not officially supported or intended for this abandoned package.
• bean.on
  wrong:

  import { on } from 'bean'

  correct:

  const bean = require('bean'); bean.on(element, 'click', handler);

  Methods are accessed directly on the 'bean' object. Destructuring named imports would not work with this CJS-era package.
• bean.fire
  wrong:

  import { fire } from 'bean'

  correct:

  const bean = require('bean'); bean.fire(element, 'click');

  Like other methods, `fire` is a property of the global/required `bean` object, not a separate named export.

Quickstart

Demonstrates basic event attachment, event delegation using a CSS selector, namespaced events, firing events, and detaching event handlers using the `bean` API.

const bean = require('bean');

const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);

bean.on(button, 'click', function (e) {
  console.log('Button clicked!', e.type, e.target);
});

const delegatedContainer = document.createElement('div');
delegatedContainer.id = 'container';
document.body.appendChild(delegatedContainer);

const paragraph1 = document.createElement('p');
paragraph1.className = 'content-item';
paragraph1.textContent = 'Paragraph 1';
delegatedContainer.appendChild(paragraph1);

const paragraph2 = document.createElement('p');
paragraph2.className = 'content-item';
paragraph2.textContent = 'Paragraph 2';
delegatedContainer.appendChild(paragraph2);

bean.on(delegatedContainer, 'click', '.content-item', function (e) {
  console.log('Delegated click on:', e.target.textContent);
});

// Example of namespaced event
bean.on(button, 'mouseover.highlight', function() {
  console.log('Button mouseover (namespaced)');
});

// Fire a namespaced event
setTimeout(() => {
  bean.fire(button, 'mouseover.highlight');
}, 1000);

// Clean up an event
setTimeout(() => {
  bean.off(button, 'click');
  console.log('Click handler removed from button.');
}, 2000);