diff --git a/examples/listeners.html b/examples/listeners.html
index f7570f34c..4181d98e8 100644
--- a/examples/listeners.html
+++ b/examples/listeners.html
@@ -22,24 +22,5 @@
 
     <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
   </body>
-  <script>
-    let map;
 
-    (function(){
-      map = L.map('map').setView([51.505, -0.09], 13);
-      map.addGoogleMutant();
-
-      map.whenReady(function() {
-        img = L.distortableImageOverlay('example.jpg', {
-          selected: true,
-        }).addTo(map);
-
-        // Wait until image is loaded before setting up DOM element listeners
-        L.DomEvent.on(img.getElement(), 'load', function() {
-          L.DomEvent.on(img, 'edit', function() { alert('edited'); });
-          L.DomEvent.on(img.getElement(), 'mouseup touchend', function() { alert('edited'); });
-        });
-      });
-    })();
-  </script>
 </html>
diff --git a/examples/listeners.js b/examples/listeners.js
new file mode 100644
index 000000000..95b462fcc
--- /dev/null
+++ b/examples/listeners.js
@@ -0,0 +1,18 @@
+    let map;
+
+    (function(){
+      map = L.map('map').setView([51.505, -0.09], 13);
+      map.addGoogleMutant();
+
+      map.whenReady(function() {
+        img = L.distortableImageOverlay('example.jpg', {
+          selected: true,
+        }).addTo(map);
+
+        // Wait until image is loaded before setting up DOM element listeners
+        L.DomEvent.on(img.getElement(), 'load', function() {
+          L.DomEvent.on(img, 'edit', function() { alert('edited'); });
+          L.DomEvent.on(img.getElement(), 'mouseup touchend', function() { alert('edited'); });
+        });
+      });
+    })();