How to use the leaflet.DomEvent function in leaflet

const _popupMouseOut = (e: any) => {
                if (markerRef.current) {
                    const leafletMarker = markerRef.current.leafletElement;
                    // detach the event
                    L.DomEvent.off(leafletMarker._popup, 'mouseout', _popupMouseOut, this);

                    // get the element that the mouse hovered onto
                    const target = e.toElement || e.relatedTarget;
                    // check to see if the element is a popup or a marker
                    if (
                        _getParent(target, 'leaflet-popup') ||
                        _getParent(target, 'leaflet-marker-icon')
                    ) {
                        return;
                    }

                    // hide the popup
                    leafletMarker.closePopup();
                }
            };

function stopContainerEvents(container) {
    L.DomEvent.disableClickPropagation(container);
    L.DomEvent.disableScrollPropagation(container);
    L.DomEvent.on(container, 'mousemove contextmenu', L.DomEvent.stop);
}

_createButton: function(t) {
        var e = L.DomUtil.create("a", t.className || "", t.container),
          i = L.DomUtil.create("span", "sr-only", t.container);
        e.href = "#", e.appendChild(i), t.title && (e.title = t.title, i.innerHTML = t.title), t.text && (e.innerHTML = t.text, i.innerHTML = t.text);
        var o = this._detectIOS() ? "touchstart" : "click";
        return L.DomEvent.on(e, "click", L.DomEvent.stopPropagation).on(e, "mousedown", L.DomEvent.stopPropagation).on(e, "dblclick", L.DomEvent.stopPropagation).on(e, "touchstart", L.DomEvent.stopPropagation).on(e, "click", L.DomEvent.preventDefault).on(e, o, t.callback, t.context), e
      },
      _disposeButton: function(t, e) {

function addFunction() {
	var div = L.DomUtil.create('form', 'bgroup');
	div.id = "dropzone";
	var bgroup = L.DomUtil.create('div','btn-group',div);
	var doneButton = L.DomUtil.create('button', "btn  btn-primary span3", bgroup);
	doneButton.type = "button";
	doneButton.innerHTML = "select a zipped .GDB";
	L.DomEvent.addListener(doneButton, "click", function() {
		fileInput.click();
	});
	var dirButton = L.DomUtil.create('button', "btn  btn-primary span3", bgroup);
	dirButton.type = "button";
	dirButton.innerHTML = "upload the files in a .GDB folder";
	L.DomEvent.addListener(dirButton, "click", function() {
		dirInput.click();
	});
	return div;
}
var NewButton = L.Control.extend({ //creating the buttons

if (!isNaN(newY) && !isNaN(newX)) {
                this.setInputAsCenter(newX, newY);
            }
        };
        this.xInput.onkeypress = this.yInput.onkeypress = (e: KeyboardEvent) => {
            if (e.key === 'Enter') {
                this.xInput.blur();
                this.yInput.blur();
            }
        };
        this.xButton.onclick = this.yButton.onclick = () => {
            this.mapStore!.setDisplayCoordinateSystem(
                GeometryService.nextCoordinateSystem(this.mapStore!.displayCoordinateSystem)
            );
        };
        L.DomEvent.disableClickPropagation(container);
        autorun(() => this.updateCoordinates());
        return container;
    }

_startMapEvents: function () {
    L.DomEvent.on(this._map, 'moveend', this._throttle(this._updateLatLng, this._throttleLimit), this);
    L.DomEvent.on(this._map, 'zoomend', this._throttle(this._updateZoom, this._throttleLimit), this);
  },

onAdd: function (map) {
    var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
      link = L.DomUtil.create('a', '', container);
    var editTools = map.editTools;

    link.href = '#';
    link.title = 'Create a new ' + this.options.kind;
    link.innerHTML = this.options.html;
    L.DomEvent
      .on(link, 'click', L.DomEvent.stop)
      .on(link, 'click', function () {
        window.LAYER = editTools[this.options.callback].call(editTools, null, {
          renderer : this.options.renderer
        });
      }, this);

    return container;
  }

public disableMouseEvent(elementId: string): void {
    const element = document.getElementById(elementId) as HTMLElement;
    if (element) {
      L.DomEvent.disableClickPropagation(element);
      L.DomEvent.disableScrollPropagation(element);
    }
  }

collapseBtn: function(itinerary) {
				var collapseBtn = L.DomUtil.create('span', itinerary.options.collapseBtnClass);
				L.DomEvent.on(collapseBtn, 'click', itinerary._toggle, itinerary);
				itinerary._container.insertBefore(collapseBtn, itinerary._container.firstChild);
			},
			collapseBtnClass: 'leaflet-routing-collapse-btn'

_onClick: function (e) {
        var point = this._map.mouseEventToLayerPoint(e).subtract(this.getOffset()), layer, clickedLayer;

        for (var id in this._layers) {
            layer = this._layers[id];
            if (layer.options.interactive && layer._containsPoint(point) && !this._map._draggableMoved(layer)) {
                clickedLayer = layer;
            }
        }
        if (clickedLayer) {
            L.DomEvent.stop(e);
            this._fireEvent([clickedLayer], e);
        }
    },