dgraham / delegated-events Goto Github PK

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: "",
});

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.

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.

CC: @dgraham @mislav

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?

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')

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?

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

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?

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.

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?

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

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(...)

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).