{"id":15086,"library":"bean","title":"Bean: Framework-Agnostic Event Manager","description":"Bean is a small, fast, and framework-agnostic event manager designed for desktop, mobile, and touch-based browsers, originating from an earlier era of web development (circa 2010-2012). The current stable version is 1.0.15, which was released over a decade ago. The project is no longer actively maintained or developed, making it an abandoned package. It offered a concise API for event handling, including `on`, `one`, `off`, `clone`, and `fire`, along with support for event delegation and namespacing. A key differentiator was its standalone nature, providing event management capabilities without the overhead of larger JavaScript libraries like jQuery.","status":"abandoned","version":"1.0.15","language":"javascript","source_language":"en","source_url":"https://github.com/fat/bean","tags":["javascript","ender","events","event","dom"],"install":[{"cmd":"npm install bean","lang":"bash","label":"npm"},{"cmd":"yarn add bean","lang":"bash","label":"yarn"},{"cmd":"pnpm add bean","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily designed for CommonJS or global script inclusion; ESM imports are not officially supported or intended for this abandoned package.","wrong":"import bean from 'bean'","symbol":"bean","correct":"const bean = require('bean')"},{"note":"Methods are accessed directly on the 'bean' object. Destructuring named imports would not work with this CJS-era package.","wrong":"import { on } from 'bean'","symbol":"bean.on","correct":"const bean = require('bean'); bean.on(element, 'click', handler);"},{"note":"Like other methods, `fire` is a property of the global/required `bean` object, not a separate named export.","wrong":"import { fire } from 'bean'","symbol":"bean.fire","correct":"const bean = require('bean'); bean.fire(element, 'click');"}],"quickstart":{"code":"const bean = require('bean');\n\nconst button = document.createElement('button');\nbutton.textContent = 'Click me';\ndocument.body.appendChild(button);\n\nbean.on(button, 'click', function (e) {\n  console.log('Button clicked!', e.type, e.target);\n});\n\nconst delegatedContainer = document.createElement('div');\ndelegatedContainer.id = 'container';\ndocument.body.appendChild(delegatedContainer);\n\nconst paragraph1 = document.createElement('p');\nparagraph1.className = 'content-item';\nparagraph1.textContent = 'Paragraph 1';\ndelegatedContainer.appendChild(paragraph1);\n\nconst paragraph2 = document.createElement('p');\nparagraph2.className = 'content-item';\nparagraph2.textContent = 'Paragraph 2';\ndelegatedContainer.appendChild(paragraph2);\n\nbean.on(delegatedContainer, 'click', '.content-item', function (e) {\n  console.log('Delegated click on:', e.target.textContent);\n});\n\n// Example of namespaced event\nbean.on(button, 'mouseover.highlight', function() {\n  console.log('Button mouseover (namespaced)');\n});\n\n// Fire a namespaced event\nsetTimeout(() => {\n  bean.fire(button, 'mouseover.highlight');\n}, 1000);\n\n// Clean up an event\nsetTimeout(() => {\n  bean.off(button, 'click');\n  console.log('Click handler removed from button.');\n}, 2000);","lang":"javascript","description":"Demonstrates basic event attachment, event delegation using a CSS selector, namespaced events, firing events, and detaching event handlers using the `bean` API."},"warnings":[{"fix":"Always use `bean.on()` for attaching event listeners. Example: `bean.on(element, 'click', handler)`.","message":"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.","severity":"deprecated","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":"<1.0.0 to >=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"The 'bean' object was not correctly loaded or is not available in the global scope/module context.","error":"Uncaught TypeError: bean.on is not a function"},{"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.","cause":"The `focus`, `blur`, and `submit` events do not naturally bubble in the DOM, preventing event delegation with Bean (and most other event libraries).","error":"Delegated event not firing for focus/blur on child elements."}],"ecosystem":"npm"}