Remove event listener when the component is destroyed

DCzajkowski · Aug 25, 2017 · 890c6f7 · 890c6f7
1 parent 5dfb644
commit 890c6f7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-pure-lightbox",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Very lightweight, JavaScript-only, lightbox plugin for Vue.js",
   "main": "dist-module/main.js",
   "scripts": {

diff --git a/src/Components/Lightbox.vue b/src/Components/Lightbox.vue
@@ -48,26 +48,10 @@
             }
         },
         mounted() {
-            window.addEventListener('keydown', (e) => {
-                if (this.visible) {
-                    switch (e.key) {
-                        case 'ArrowRight':
-                            this.next()
-                            break
-                        case 'ArrowLeft':
-                            this.prev()
-                            break
-                        case 'ArrowDown':
-                        case 'ArrowUp':
-                        case ' ':
-                            e.preventDefault()
-                            break
-                        case 'Escape':
-                            this.hide()
-                            break
-                    }
-                }
-            })
+            window.addEventListener('keydown', this.eventListener)
+        },
+        destroyed() {
+            window.removeEventListener('keydown', this.eventListener)
         },
         methods: {
             show() {
@@ -94,6 +78,26 @@
                     this.index += 1
                 }
             },
+            eventListener(e) {
+                if (this.visible) {
+                    switch (e.key) {
+                        case 'ArrowRight':
+                            this.next()
+                            break
+                        case 'ArrowLeft':
+                            this.prev()
+                            break
+                        case 'ArrowDown':
+                        case 'ArrowUp':
+                        case ' ':
+                            e.preventDefault()
+                            break
+                        case 'Escape':
+                            this.hide()
+                            break
+                    }
+                }
+            },
         },
     }
 </script>