问当不同的事件发生时，JavaScript如何在不同的时间查找函数名和变量？

EN

"use strict"

/* Make an SVG element dragable using the translate transfrom. */
const makeDraggable = (el) => {

    /* Pointer SVG coordinates */
    const getPointerPosition = (e) => {
        if (e.touches) e = e.touches[0];
        return new DOMPoint(e.clientX, e.clientY).matrixTransform(svg.getScreenCTM().inverse());
    }

    /* Mouse down / touch start event */
    const dragStart = (e) => {
        /* Add event listeners. */
        root.addEventListener('mousemove', dragMove);
        root.addEventListener('touchmove', dragMove);
        root.addEventListener('mouseup', dragEnd);
        root.addEventListener('mouseleave', dragEnd);
        root.addEventListener('touchend', dragEnd);
        root.addEventListener('touchleave', dragEnd);
        root.addEventListener('touchcancel', dragEnd);

        /* Recursive check to find first parent group.  If found, apply transform to group. */
        let g = el;
        while (g && g.tagName !== 'g') g = g.parentNode;
        if (g) el = g;

        /* Check if element already has a translate as it's first transform.  If not, add it. */
        const transforms = el.transform.baseVal;
        if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE)
            translate = transforms.insertItemBefore(svg.createSVGTransform(), 0);
        else translate = transforms.getItem(0);

        /* Get pointer position during initial down/touch and offset the difference to the element translate origin. */
        offset = getPointerPosition(e);
        offset.x -= translate.matrix.e;
        offset.y -= translate.matrix.f;
    }

    /* Mouse move / touch move event */
    const dragMove = (e) => {
        /* Get pointer position of move, apply difference from initial pointer position to translate transform. */
        const point = getPointerPosition(e);
        translate.setTranslate(point.x -= offset.x, point.y -= offset.y);
    }

    /* Mouse up / leave / touch end / leave / cancel event */
    const dragEnd = () => {
        /* Remove inactive event listeners. */
        root.removeEventListener('mousemove', dragMove);
        root.removeEventListener('touchmove', dragMove);
        root.removeEventListener('mouseup', dragEnd);
        root.removeEventListener('mouseleave', dragEnd);
        root.removeEventListener('touchend', dragEnd);
        root.removeEventListener('touchleave', dragEnd);
        root.removeEventListener('touchcancel', dragEnd);
    }

    /* Attach event listeners to dragable element. */
    el.addEventListener('mousedown', dragStart);
    el.addEventListener('touchstart', dragStart);

    /* Set variables. */
    let svg = el;
    while (svg && svg.tagName !== 'svg') svg = svg.parentNode;
    const doc = svg.ownerDocument;
    const root = doc.documentElement || doc.body || svg;
    let translate, offset;

}

const loadSVG = () => {
    document.querySelectorAll(".draggable").forEach(el => makeDraggable(el))
}

* {
    margin: 0;
}

svg {
    background-color: lightblue;
    width: 200px;
    height: 200px;
}

.draggable {
    cursor: move;
}

.notdraggable {
    cursor: not-allowed;
}

Drag Test