Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
bean
✓ const bean = require('bean')
✗ import bean from 'bean'
Primarily designed for CommonJS or global script inclusion; ESM imports are not officially supported or intended for this abandoned package.
bean.on
✓ const bean = require('bean'); bean.on(element, 'click', handler);
✗ import { on } from 'bean'
Methods are accessed directly on the 'bean' object. Destructuring named imports would not work with this CJS-era package.
bean.fire
✓ const bean = require('bean'); bean.fire(element, 'click');
✗ import { fire } from 'bean'
Like other methods, `fire` is a property of the global/required `bean` object, not a separate named export.
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);
Debug
Known issues
deprecatedThe `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.fixAlways use `bean.on()` for attaching event listeners. Example: `bean.on(element, 'click', handler)`.
affects: >=1.0.0
gotchaEvent 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.fixFor `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.
affects: >=1.0.0
breakingWhen 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.fixReview 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.
affects: <1.0.0 to >=1.0.0
Errors
Common errors & fixes
Uncaught TypeError: bean.on is not a function
The 'bean' object was not correctly loaded or is not available in the global scope/module context.
fixEnsure 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.
The `focus`, `blur`, and `submit` events do not naturally bubble in the DOM, preventing event delegation with Bean (and most other event libraries).
fixAttach 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.
Audit
Dependencies
No dependency data recorded yet.