How do event listeners have access to a variable declared inside a function which configures multiple event listeners?

Question

I have been trying to learn javascript and i have stumbled upon an intresting code that i can't seem to understand. Entire code is provided below or in this website: https://code-boxx.com/drag-drop-sortable-list-javascript/

sort-list.html

<!-- (A) LOAD CSS + JS -->
<link rel="stylesheet" href="sort-list.css"/>
<script src="sort-list.js"></script>
 
<!-- (B) THE LIST -->
<ul id="sortlist">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Forth</li>
  <li>Fifth</li>
</ul>
 
<!-- (C) INIT ON PAGE LOAD -->
<script>
window.addEventListener("DOMContentLoaded", () => {
  slist(document.getElementById("sortlist"));
});
</script>

sort-list.js

function slist (target) {
  // (A) SET CSS + GET ALL LIST ITEMS
  target.classList.add("slist");
  let items = target.getElementsByTagName("li"), current = null;

  // (B) MAKE ITEMS DRAGGABLE + SORTABLE
  for (let i of items) {
    // (B1) ATTACH DRAGGABLE
    i.draggable = true;
    
    // (B2) DRAG START - YELLOW HIGHLIGHT DROPZONES
    i.ondragstart = (ev) => {
      current = i;
      for (let it of items) {
        if (it != current) { it.classList.add("hint"); }
      }
    };
    
    // (B3) DRAG ENTER - RED HIGHLIGHT DROPZONE
    i.ondragenter = (ev) => {
      if (i != current) { i.classList.add("active"); }
    };

    // (B4) DRAG LEAVE - REMOVE RED HIGHLIGHT
    i.ondragleave = () => {
      i.classList.remove("active");
    };

    // (B5) DRAG END - REMOVE ALL HIGHLIGHTS
    i.ondragend = () => { for (let it of items) {
        it.classList.remove("hint");
        it.classList.remove("active");
    }};
 
    // (B6) DRAG OVER - PREVENT THE DEFAULT "DROP", SO WE CAN DO OUR OWN
    i.ondragover = (evt) => { evt.preventDefault(); };
 
    // (B7) ON DROP - DO SOMETHING
    i.ondrop = (evt) => {
      evt.preventDefault();
      if (i != current) {
        let currentpos = 0, droppedpos = 0;
        for (let it=0; it<items.length; it++) {
          if (current == items[it]) { currentpos = it; }
          if (i == items[it]) { droppedpos = it; }
        }
        if (currentpos < droppedpos) {
          i.parentNode.insertBefore(current, i.nextSibling);
        } else {
          i.parentNode.insertBefore(current, i);
        }
      }
    };
  }
}

The part that i do not understand is how added event listeners (for instance, ondragstart) can interact with the variable "current". If i understand correctly, once the page loads, the function slist() from sort-list.js is called and it adds all different event listeners. So, how do these event listeners are able to set and get variable "current" value if that variable is declared inside the function that was responsible for configuring event listeners. Shouldnt the variable current no longet exist when the function slist() finishes adding event listenrs? If the variable "current" was declared outside of function as global variable, i understand how the event listeners could interact with that variable since its globally accessible as its declared in the JS file itself:

let current;
function slits(target){...}