I often find myself writing code as follows...var startX, startY, dragging = false, element = document.getElementById(whatever);var start = function(e){  dragging = true;  startX = e.pageX;  startY = e.pageY;  element.style.opacity = 0.5;}var move = function(e){  if (!dragging) return;  var deltaX = startX - e.pageX;  var deltaY = startY - e.pageY;  //apply to element}var end = function(e){  dragging = false;  element.style.opacity = 1;}element.addEventListener(mousedown, start, false);document.addEventListener(mousemove, move, false);document.addEventListener(mouseup, end, false);Now, my problem is really basic, it feels to me that the functions should be auxiliary and belong to the bottom part of my program, but I don't know how to attach the functions to the event listeners without declaring them first. How do I restructure my code so that it is more evident what I'm going to do with these functions?
How to reorganize event listeners in javascript
javascript
You can use hoisting. Declare the functions wherever you want, in this case, later, but declare them this way:function start(e){}When declared this way, they are hoisted (read about it here), and can be used before the declaration.Your code, restructured, would look like this:var startX, startY, dragging = false, element = document.getElementById(whatever);element.addEventListener(mousedown, start, false);document.addEventListener(mousemove, move, false);document.addEventListener(mouseup, end, false);function start(e){  dragging = true;  startX = e.pageX;  startY = e.pageY;  element.style.opacity = 0.5;}function move(e){  if (!dragging) return;  var deltaX = startX - e.pageX;  var deltaY = startY - e.pageY;  //apply to element}function end(e){  dragging = false;  element.style.opacity = 1;}