Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
dom-listener
Advanced tools
This library simplifies the event delegation pattern for DOM events. When you
build a DOMListener
with a DOM node, you can associate event handles with any
of its descendant nodes via CSS selectors.
Say you have the following DOM structure.
<div class="parent">
<div class="child">
<div class="grandchild"></div>
<div class="grandchild"></div>
</div>
</div>
Now you can associate a click
event with all .grandchild
nodes as follows:
DOMListener = require 'dom-listener'
listener = new DOMListener(document.querySelector('.parent'))
listener.add '.grandchild', 'click', (event) -> # handle event...
To create a selector-based handler, call DOMListener::add
with a selector,
and event name, and a callback. Handlers with selectors matching a given element
will be invoked in order of selector specificity, just like CSS. In the event
of a specificity tie, more recently added handlers will be invoked first.
listener.add '.child.foo', 'click', (event) -> # handler 1
listener.add '.child', 'click', (event) -> # handler 2
listener.add '.child', 'click', (event) -> # handler 3
In the example above, all handlers match an event on .child.foo
, but handler 1
is the most specific, so it will be invoked first. Handlers 2 and 3 are tied in
specificity, so handler 3 is invoked first since it is more recent.
To create event handlers for specific DOM nodes, pass the node rather than a
selector as the first argument to DOMListener::add
.
childNode = document.querySelector('.child')
listener.add childNode, 'click', (event) -> # handle inline event...
This is a bit different than adding the event handler directly via the native
.addEventListener
method, because only inline handlers registered via
DOMListener::add
will correctly interleave with selector-based handlers.
Interleaving selector-based handlers with native event listeners isn't possible
without monkey-patching DOM APIs because you can't ask an element what event handlers are registered.
If you want to remove an event handler, call .dispose()
on the Disposable
returned from DOMListener::add
:
disposable = listener.add 'child', 'click', (event) -> # handle event
disposable.dispose() # remove event handler
If you want to remove all event handlers associated with the listener and
remove its native event listeners, call DOMListener::destroy()
.
listener.destroy() # All handlers are removed
You can add new event handlers and call .destroy()
again at a later point.
FAQs
A listener for delegated DOM events.
The npm package dom-listener receives a total of 0 weekly downloads. As such, dom-listener popularity was classified as not popular.
We found that dom-listener demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.