dgraham / delegated-events Goto Github PK
View Code? Open in Web Editor NEWA small, fast delegated event library for JavaScript.
License: MIT License
A small, fast delegated event library for JavaScript.
License: MIT License
on('body', 'init', e => {
console.log(e)
})
fire(document.body, 'init')
console.log
is never triggered.
delegate-it works fine:
import on from 'delegate-it'
import { fire } from 'delegated-events'
on('body', 'init', e => console.log(e))
fire(document.body, 'init')
define(['exports', 'selector-set'], function (exports, _selectorSet) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.on = on;
exports.off = off;
exports.fire = fire;
var _selectorSet2 = babelHelpers.interopRequireDefault(_selectorSet);
It looks like the generated output includes a reference to a babelHelpers
helper module which github doesn't use. It shouldn't be necessary or an implicit dependency of delegated-events.
To: @dgraham
Is there any way to get this to work with a form submit?
I thought it might be a simple matter of using the custom event side of things, but even after trying that my form wasn't submitting.
I am doing the following:
window['delegate-events'].on('form:submit', document.querySelector('#myForm'), function(e) { e.preventDefault(); console.log('Form submitted!') });
If I then go to the developer tools console and do
window['delegate-events'].fire(document.querySelector('#myForm'), 'form:submit', {});
It returns 'true', but the actual event never triggers ('Form submitted' doesn't appear in the console).
I'd like to be able to attach events within a child iframe from the parent document js code? This doesn't seem possible in the current implementation. Thoughts?
Usually event delegator libs (like https://ghub.io/delegate-it) provide target element, capturing the events.
That can be useful in #16, #20, #23 etc.
The use-case include as well custom elements shadow dom https://developers.google.com/web/fundamentals/web-components/shadowdom#events, since it may hide some events.
on(el, 'selector', evt, handler)
on('selector', evt, handler)
Are there any plans on merging #23 or making own implementation?
Feature request!
Would ❤️ support for capture events.
on('submit', 'form.js-validate-submission', (event) => {
// ...
}, {capture: true})
or maybe we're getting kinda long on arguments, support named arguments for the full API:
on({
event: 'submit',
selector: 'form.js-validate-submission',
capture: true
}, (event) => {
// ...
})
Capture events would run before directly bound event handlers.
on('submit', 'form', (event) => {
console.log(1)
}, {capture: true})
observe('form', (form) => {
form.addEventListener('submit', (event) => {
console.log(2)
})
})
on('submit', 'form', (event) => {
console.log(3)
})
Maybe I'll have time to write up a PR, but figured I'd make an issue first.
I'm attempting to use this on my webpage (it's an internal company one) but the Chrome devtools keep coming up about 't is not a constructor'.
All i'm doing is:
window['delegate-events'].on('click', '.btn-delete', function(e) { console.log(e); });
.btn-delete is a button on a dynamic table row, the error occurs when I load the page, if I then click on the button it does nothing.
As per README:
Internet Explorer requires polyfills for CustomEvent and WeakMap.
The suggested WeakMap polyfill is archived https://github.com/googlearchive/WeakMap and not installable with npm/yarn.
It should be possible to install that dependency with the repo URL, but is that really what you're suggesting?
Is there a possibility to use delegated-events
in an old-school way? Something like this:
<script src="/path/to/delegated-events.js"></script>
window.on(...)
window.off(...)
window.fire(...)
The fire
utility triggers a cancellable CustomEvent. But as it does not return the event object, there is no way to know whether the event was cancelled or no.
The on
function does not seem to trigger at all when fired for the focus
event.
Here's an example of the issue:
https://codepen.io/aln447/pen/zYoEjab
The same listener works well for all the others i've tested including the focusin
event.
The focus event is the only one I can use in my usecase, and it would be great if it was corrected.
Thanks
On the fire
function the last parameter is any
, if that was changed to a generic you could optionally use an interface to help with type checking and the behavior should remain the same as any
. Maybe there's side effects I'm not realizing, but if there aren't any is there any objection to changing the definition to something like this?
export function fire<T>(target: Document | Element, name: string, detail?: T): boolean;
Example usage:
interface ISomeEvent {
val1: int;
val2: string;
}
// adds type checking to the event details
fire<ISomeEvent>(target, "do:something", {
val1: 0,
val2: "",
});
// remains the same as `any`
fire(target, "do:something", {
val1: 0,
val2: "",
});
In jQuery, I can set a delegated event handler to a specific element in the DOM tree:
$element.on('click', '.selector', callbackFunc)
How do I do the same with delegated-events?
In the source code I see this:
function on(name, selector, fn) {
// ...
document.addEventListener(name, dispatch, capture);
// ..
}
Does it mean event listeners are always/only attached to the document?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.