Cross-browsers events listener implementation

100%

Cross-browsers events listener implementation

✓ Published0🌍 Public

Last edited Jul 6, 2011

Created on Jul 6, 2011

This example shows a cross-browser event listener abstraction that normalizes how JavaScript attaches and removes DOM event handlers. The code defines an `addListener` and `removeListener` pair, then initializes them by detecting the available API at runtime. It uses the standard `window.addEventListener` and `removeEventListener` methods when supported, falls back to Internet Explorer’s `document.attachEvent` and `detachEvent` with an `'on'` prefix, and finally uses direct `el['on' + type]` property assignment for older browsers. The logic is contained in a single self-invoking object that returns itself, ready for use without any external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

intercept *.addEventListener for debugging

This example demonstrates how to intercept and log every `addEventListener` call on HTML element prototypes for debugging purposes. It enumerates all `HTML*` interfaces from `window`, then wraps each prototype’s `addEventListener` method to print the event type, listener, and `useCapture` flag, followed by a stack trace via `console.trace()`. The code uses native browser APIs like `Object.getOwnPropertyNames`, `window`, and prototype manipulation, with no external libraries, and is based on a Stack Overflow solution adapted for Firefox.

Aalessioalex

62% match

Loading thumbnail…

Do we really need an event emitter?

This example shows how to replace event-emitter libraries like WildEmitter with native browser APIs. It defines a Vocab model that dispatches a custom `addToVocab` event via `dispatchEvent(new CustomEvent(...))` on the global `window` object, and a VocabView that listens with `addEventListener`. The code demonstrates that `addEventListener` and `dispatchEvent` work globally without needing an emitter instance, using only vanilla JavaScript and DOM events.

Aamundo

60% match

Loading thumbnail…

Synopsis

This example shows a DOM element’s CSS style properties being monitored for changes, logging each modification with its old and new values. It demonstrates both a single-property listener and a multi-property change handler. The code uses Backbone.Events for event handling, MutationObserver to detect style attribute mutations, and Underscore for utility functions. The demo binds to `transform-origin` and `border-radius` on a div, then programmatically updates `transform-origin` after one second, triggering the change callbacks.

Aabernier

58% match

Loading thumbnail…

Gist 518525

This example visualizes the JavaScript events bound to elements on a page, showing their frequency and the element types they target. It uses jQuery’s `.data(‘events’)` to inspect registered handlers, then binds a global listener to all those event types via `.bind()` on the `html` element. As events fire, the code increments per-event and aggregate counts, logging each target’s `nodeName` into arrays for later analysis. The underlying data comes from live user interactions on the rendered DOM, providing a real-time snapshot of event activity without any external dataset.

DDylanFM

56% match

Loading thumbnail…

basic DOM Ready

This example demonstrates a lightweight DOM-ready utility that detects when the document is fully loaded and executes registered callback functions. It handles browser-specific quirks by using `document.addEventListener` for Mozilla and Opera, a `doScroll` check for Internet Explorer, and a stylesheet-counting fallback for Safari. The code exposes a `DomReady.ready` method to queue functions, running them immediately if the DOM is already ready or deferring them otherwise. A final fallback ensures `window.onload` triggers the pending callbacks.

Aalessioalex

56% match

Loading thumbnail…

simple buzzPost listener

This example demonstrates a minimal event-listener setup that subscribes to a live message stream and logs each incoming event to the browser console. It shows how a single JavaScript file can establish a real-time connection to a remote hub using the native EventSource API, which handles the server-sent events protocol. The code defines a fixed channel list—alfa, bravo, and charlie—via the URL string, then attaches an `onmessage` handler to print every message object as it arrives. No visualization or data transformation occurs; the focus is purely on the listening and logging mechanism.

Aandrew-psch

55% match

Loading thumbnail…

React, removeEventListener and bind(this) gotcha

This example demonstrates a common memory-leak pitfall in React ES6 components: using `bind(this)` directly inside `addEventListener` and `removeEventListener` calls. The code shows a `resize` listener attached to `window` in `componentDidMount` and removed in `componentWillUnmount`, but because each `bind()` creates a new function reference, the removal fails. It then illustrates three fixes: binding once in the constructor, reassigning the method to its bound version, or using a class-level arrow function, highlighting how context binding affects cleanup in lifecycle methods.

RRestuta

54% match

Loading thumbnail…

#javascript

This example demonstrates a JavaScript code editor that maintains focus and blur states for a text input area. The snippet configures event handlers for editor focus and focus loss, using a React component that passes `onEditorFocus` and `onEditorLoseFocus` callbacks through its props. It shows how the editor responds to user interaction by triggering these custom methods, which could update a visualization or UI state. The code relies on React’s event system and component props to manage the editor’s behavior, with no external libraries like d3 or Canvas involved.

GGugaGongadze

53% match