Skip to content

Instantly share code, notes, and snippets.

@burdiuz

burdiuz/README.md

Last active Oct 2, 2018
Embed
What would you like to do?
translateJQueryEventsToDOM() - Re-dispatch jQuery events from DOM elements

jQuery events to DOM

Listens for jQuery events to re-dispatch them from DOM element as CustomEvent. To redispatch Bootstrap 4 modal events from modal DOM element

import translateJQueryEventsToDOM from '@actualwave/jquery-events-to-dom';

translateJQueryEventsToDOM()(
  'show.bs.modal',
  'shown.bs.modal',
  'hide.bs.modal',
  'hidden.bs.modal'
);

This will re-dispatch bootstrap modal show, shown, hide and hidden events from target DOM element.

const modalElement = document.getElementById('my-bootstrap-modal');

modalElement.addEventListener('hidden', (event) => {
  console.log('Modal is hidden now.');
});

translateJQueryEventsToDOM accepts two optional arguments

  • target - DOM element to listen for jQuery events, by default document.
  • jquery - jQuery instance, by default window.$.
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const convertJQueryEventToDOM = (jQueryEvent) => new CustomEvent(jQueryEvent.type, { detail: jQueryEvent });
const dispatchJQueryEventToDOM = (jQueryEvent) => jQueryEvent.target.dispatchEvent(convertJQueryEventToDOM(jQueryEvent));
const translateJQueryEventsToDOM = (target = document, jQuery = window.$) => (...events) => events.forEach((jQueryEventType) => {
jQuery(target).off(jQueryEventType, dispatchJQueryEventToDOM);
jQuery(target).on(jQueryEventType, dispatchJQueryEventToDOM);
});
exports.translateJQueryEventsToDOM = translateJQueryEventsToDOM;
exports.default = translateJQueryEventsToDOM;
{
"author": {
"name": "Oleg Galaburda",
"email": "burdiuz@gmail.com",
"url": "http://actualwave.com/"
},
"bugs": {
"url": "https://gist.github.com/burdiuz/8119b18ab78468b44b47afe3cff347df",
"email": "burdiuz@gmail.com"
},
"description": "Listens for jQuery events to re-dispatch them from DOM element as CustomEvent",
"homepage": "https://gist.github.com/burdiuz/8119b18ab78468b44b47afe3cff347df",
"keywords": [
"js",
"javascript",
"jQuery",
"DOM",
"event",
"dispatchEvent"
],
"license": "MIT",
"main": "jquery-events-to-dom.js",
"name": "@actualwave/jquery-events-to-dom",
"version": "0.0.1"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment