31 Repos
Techniques for handling events at a parent level.
Distinguishing note: Reduces memory usage by attaching listeners to a common parent.
Explore 31 awesome GitHub repositories matching web development · Event Delegation. Refine with filters or upvote what's useful.
Solid is a declarative JavaScript framework for building user interfaces through fine-grained reactivity. By utilizing a compile-time template transformation process, it converts JSX into direct DOM manipulation instructions, eliminating the need for a virtual tree. This architecture allows the framework to track dependencies at the individual element level, ensuring that state changes trigger surgical updates to the interface. The framework distinguishes itself through its isomorphic rendering pipeline, which shares reactive logic across server and client environments to support both initial
Attaches event listeners to a common parent to capture events bubbling from child elements.
Stimulus is a JavaScript behavior framework and client-side logic layer used to add interactive behavior to server-rendered HTML. It functions as a system of DOM component controllers that organize JavaScript logic into classes, allowing developers to enhance server-delivered markup without replacing the rendering process with a client-side framework. The framework uses data attributes to bind JavaScript classes to HTML elements and map DOM events to specific methods through document-level event delegation. It employs a lifecycle manager based on mutation observers to automatically instantiat
Implements document-level event delegation that maps HTML data attributes to specific controller methods.
Tippy.js is a JavaScript tooltip library and interactive popup framework used to create tooltips, popovers, and dropdowns. It functions as a floating UI component toolkit that renders content relative to a reference element with support for automatic positioning, flip-positioning, and offsets. The library acts as an accessible overlay manager, using ARIA attributes and focus management to ensure screen reader compatibility. It also serves as a CSS animation tool, providing utilities for transitions, spring physics, and themes to manage the visual entry and exit of floating interface elements.
Implements event delegation to manage interactions for multiple trigger elements via a single parent listener.
This project is a technical interview study guide and a markdown-driven static site designed to help developers prepare for coding screenings. It serves as a curated collection of common technical questions and expert answers, functioning as a comprehensive educational resource. The platform provides a structured curriculum and reference materials across several key domains. This includes a JavaScript language reference covering programming fundamentals, a frontend engineering curriculum focused on UI patterns and responsive design, and a web security knowledge base detailing attack vectors a
Explains the technique of attaching a single listener to a parent to handle children events via bubbling.
This project is a technical interview preparation resource focused on JavaScript. It provides a collection of common technical questions, detailed answers, and conceptual quizzes designed to help users master core language fundamentals and browser APIs. The resource utilizes an interactive infrastructure that includes a coding workspace with in-browser runtime execution and an automated test suite to validate code correctness. It organizes content through curated learning paths and modular concept mapping to decompose complex language fundamentals into searchable study modules. The curriculu
Provides detailed explanations and practice for implementing event delegation to optimize memory usage.
vxe-table is a high-performance data table component and UI library for Vue, designed for building data-heavy applications. It functions as a virtualized data grid and spreadsheet UI framework capable of rendering millions of rows by mounting only the visible elements of a dataset. The project distinguishes itself through spreadsheet-like functionality, including cell selection, copy-paste support, and the generation of cross-tabulated pivot tables. It also provides specialized tools for managing complex data hierarchies using virtual trees, row grouping, and cell merging. The library covers
Uses centralized event listeners to manage cell interactions and keyboard navigation efficiently.
Epoxy is an Android library for building complex RecyclerView screens using a model-driven approach. It generates RecyclerView adapter models at compile time from annotated custom views, data binding layouts, or view holders, eliminating the manual boilerplate typically associated with view holders and adapters. The library provides a diffing engine that automatically compares model lists and applies minimal updates with animations for insertions, removals, and moves. The library distinguishes itself through its controller-based model building, where a controller class with a buildModels meth
Attaches typed click listeners to models, providing the model, view, and position on click.
This project is a JavaScript UI component library and frontend utility toolkit. It serves as a web modal framework and popup library, providing a specialized system for rendering interactive dialogs, overlays, and layered interfaces over web page content. The library is distinguished by its comprehensive set of overlay tools, including alert dialogs, confirmation prompts, and the ability to embed external content via iframes. It also features a responsive twelve-column grid system for cross-device layout compatibility and an internal modular dependency management system for on-demand loading
Binds event handlers to multiple elements by mapping shared HTML attributes to JavaScript callback functions.
This project is a front-end interview study guide and a collection of structured notes designed for technical job preparation. It serves as a comprehensive reference for web technologies, common technical interview questions, and JavaScript algorithm implementation. The notebook distinguishes itself by integrating specialized guides for web performance optimization, browser API documentation, and JavaScript algorithm references. It provides a structured approach to solving coding challenges involving data structures like binary trees, linked lists, and array manipulation. The content covers
Details the implementation of event delegation to efficiently handle events from multiple child elements.
Cash is a lightweight DOM manipulation library and HTML element wrapper designed as an alternative to jQuery for selecting and modifying elements in modern browsers. It functions as a modular DOM framework and JavaScript utility library, providing a system to wrap DOM nodes into actionable collections for batch processing. The project is built with a modular design that supports tree-shaking, allowing build tools to exclude unused methods to minimize the final bundle size. It provides mechanisms for extending the core functionality and collection prototypes to implement reusable plugins and c
Supports binding event listeners to parent elements to efficiently manage events for current and future child elements.
SlickGrid is a high-performance JavaScript data grid and virtualized data table designed to render large datasets in the browser. It functions as a web spreadsheet component and tabular data manager, utilizing virtual scrolling to maintain responsiveness when displaying hundreds of thousands of entries. The library employs a canvas-based UI system to draw grid lines and elements, reducing the total number of DOM nodes. It separates raw data from visual presentation through column-based mapping and uses a formatter pipeline to transform data values into HTML strings. Capabilities include row
Attaches listeners to parent containers to manage child cell interactions, reducing memory usage.
Open Source Javascript Gantt
Implements event delegation by mapping data attributes on SVG elements to interaction handlers.
Auto generated skeleton loading framework
Allows excluding specific CSS selectors and tagged elements from skeleton bone extraction.
This project is a Virtual DOM renderer, an engine that transforms virtual node trees into real DOM elements and updates them efficiently when the tree changes. Its core identity is focused on the rendering and reconciliation of virtual nodes, providing the foundational mechanism for building user interfaces. The renderer implements a patch-based DOM update system that applies targeted operations based on computed differences between virtual node trees. It supports fragment rendering for components with multiple root children, uses keyed child reconciliation to reuse and reorder elements durin
Attaches event listeners to DOM elements through virtual node props with automatic cleanup on unmount.
Snap.js is a JavaScript library for building draggable side navigation panels on touch devices. It enables slide-in menus from the left or right screen edge, driven by a gesture-based state machine that interprets drag and flick gestures to open and close the panel. The library distinguishes horizontal menu drags from vertical scrolling by analyzing the initial touch movement angle, and locks menu movement to a single axis to prevent interference. It uses hardware-accelerated CSS transforms for smooth animations and provides configurable snap thresholds that determine whether a drag should op
Attaches touch event listeners to the document body while allowing specific child elements to opt out.
SwipeRecyclerView is an Android library that extends the standard RecyclerView with swipeable action menus, drag-and-drop item reordering, and swipe-to-delete gesture detection. It provides a complete set of interactive list behaviors that let users reveal contextual buttons by swiping list items left or right, rearrange items by long-pressing and dragging them to new positions, and remove items with a horizontal swipe gesture that automatically updates the underlying data model. The library distinguishes itself by combining multiple interaction patterns into a single, cohesive component. It
Fires position-aware callbacks when list items are tapped or long-pressed.
re-frame ist ein funktionales Framework für den Bau von Single-Page-Anwendungen in ClojureScript. Es bietet eine zentralisierte, unveränderliche Datenbank, die als Single Source of Truth für den gesamten Anwendungszustand dient und einen strikten, unidirektionalen Datenfluss erzwingt, bei dem Events Zustandsübergänge und nachfolgende View-Updates auslösen. Das Framework zeichnet sich durch einen reaktiven Signal-Graphen und eine Interceptor-basierte Middleware-Pipeline aus. Indem Anwendungslogik als Sequenz datengetriebener Events und deklarativer Side-Effects behandelt wird, entkoppelt es die Geschäftslogik von der View-Schicht. Diese Architektur ermöglicht es Entwicklern, komplexe Zustandsübergänge und externe Operationen durch reine Funktionen zu verwalten, wobei sichergestellt wird, dass Side-Effects von einem separaten Interpreter statt durch imperative Aufrufe ausgeführt werden. Das System umfasst eine umfassende Suite an Funktionen für das Management der Anwendungsarchitektur, einschließlich reaktiver Datenableitung, abonnementbasierter View-Reconciliation und eventgesteuertem Zustandsmanagement. Es unterstützt fortgeschrittene Entwicklungs-Workflows wie Event-Tracing, State-Checkpointing und die Möglichkeit, Side-Effects für isolierte Tests zu stubben. Das Projekt ist für die Integration mit React konzipiert und nutzt Virtual-DOM-Reconciliation, um Benutzeroberflächen effizient zu aktualisieren. Es bietet ein robustes Set an Utilities für den Umgang mit Cross-Cutting Concerns, die Verwaltung komplexer Datenfluss-Graphen und die Koordination asynchroner Operationen innerhalb einer vorhersagbaren, sequenziellen Event-Pipeline.
Uses maps instead of positional vectors for event data to improve code maintainability and reduce fragility.
bootstrap-wysiwyg ist ein WYSIWYG-HTML-Editor und browserbasierter Content-Editor, der für die Integration mit dem Bootstrap-CSS-Framework entwickelt wurde. Er bietet eine visuelle Oberfläche zum Erstellen und Formatieren von Rich-Text-Inhalten, die HTML-Markup ausgibt. Der Editor ermöglicht benutzerdefinierte Textformatierungs-Workflows durch die Konfiguration von Toolbars und Tastenkürzeln. Nutzer können Bilder via Drag-and-Drop einbetten und einen dedizierten Prozess nutzen, um redundante Tags und Whitespace im generierten Markup zu bereinigen.
Links toolbar elements to formatting functions using HTML data attributes via event delegation.
Swup ist eine Seitenübergangsbibliothek und ein AJAX-Seitenlader, der entwickelt wurde, um nahtlose, animierte Übergänge zwischen Seiten auf serverseitig gerenderten Websites zu erstellen. Er fungiert als DOM-Inhalts-Orchestrator und Browser-Verlaufsmanager, der die Navigation abfängt, um Seiteninhalte dynamisch zu ersetzen und ein Single-Page-Application-Erlebnis zu simulieren. Das Projekt zeichnet sich durch ein Hook-basiertes Lebenszyklussystem und eine Plugin-Architektur aus, die die Injektion von benutzerdefinierter Logik und Animationseffekten ermöglicht. Es unterstützt fortschrittliche visuelle Methoden, einschließlich DOM-Inhalts-Morphing, parallelem DOM-Rendering für überlappende Animationen und die Integration mit der nativen Browser-View-Transitions-API. Die Bibliothek deckt eine breite Palette an Funktionen ab, einschließlich clientseitigem Navigationsmanagement, speicherbasiertem Seitencaching und Hintergrund-Seiten-Preloading zur Leistungsoptimierung. Sie bietet zudem umfassende Wiederherstellung der Scroll-Position, Barrierefreiheitsoptimierungen für Screenreader sowie Tools zur Synchronisation von Dokument-Head-Metadaten und Skriptausführung über Übergänge hinweg.
Attaches global listeners to the document to intercept link clicks and trigger dynamic page transitions.
Dieses Projekt ist eine kollaborative Software-Arbeitsgruppe und Release-Track, die sich auf die technische Entwicklung und den Rollout des React 18-Bibliotheks-Updates konzentriert. Es dient als Community-Koordinationsbemühung und Diskussionsforum zur Verwaltung der Meilensteine und Funktionsumfänge dieser großen Frontend-Framework-Version. Die Arbeitsgruppe erleichtert die Open-Source-Release-Koordination und Software-Versionsplanung durch eine verteilte Gruppe von Mitwirkenden. Sie konzentriert sich auf das Sammeln technischer Rückmeldungen aus der Community und die Verwaltung öffentlicher Diskussionen, um den Code und die Dokumentation der Bibliothek vor einer offiziellen Veröffentlichung zu verfeinern. Der Entwicklungsumfang umfasst das gleichzeitige Rendering von Benutzeroberflächen, Frontend-State-Management sowie die Verfeinerung der internen Reconciliation- und Rendering-Logik.
Attaches event listeners to server-rendered DOM trees to make static content interactive on the client.