Remove element event listeners through base component (#33429)

After some research, I found out that EventHandler saves all the custom events per element using namespace, and is capable of removing handlers using only the element and its namespace (`DATA_KEY`).

So, probably is better to utilize the base-component to do the same job.

diff --git a/js/src/base-component.js b/js/src/base-component.js
index 14e13a0eb71b4cb1b34f2183f393f57a9ae27aff..77d54faadc73269e7f83974a1489c95fbbc7e9c3 100644 (file)
--- a/js/src/base-component.js
+++ b/js/src/base-component.js
@@ -6,6 +6,7 @@
  */
 
 import Data from './dom/data'
+import EventHandler from './dom/event-handler'
 
 /**
  * ------------------------------------------------------------------------
@@ -29,6 +30,7 @@ class BaseComponent {
 
   dispose() {
     Data.remove(this._element, this.constructor.DATA_KEY)
+    EventHandler.off(this._element, `.${this.constructor.DATA_KEY}`)
     this._element = null
   }
 

diff --git a/js/src/carousel.js b/js/src/carousel.js
index e336abb1eda2cb63ef2fb63df98bbbb858471dfe..ebb0b7b20152f06ad6c0ff96eb1224a177cec074 100644 (file)
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -216,8 +216,6 @@ class Carousel extends BaseComponent {
   }
 
   dispose() {
-    EventHandler.off(this._element, EVENT_KEY)
-
     this._items = null
     this._config = null
     this._interval = null

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 7d5421a56d93e37708d6254cb44db4a21a3f17f4..b126d3196a9330856d7f7e374009342d085db63d 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -237,7 +237,6 @@ class Dropdown extends BaseComponent {
   }
 
   dispose() {
-    EventHandler.off(this._element, EVENT_KEY)
     this._menu = null
 
     if (this._popper) {

diff --git a/js/src/modal.js b/js/src/modal.js
index dea90ec0a75843b4d23898bcdd06b58ee32ba5f8..c6d67ac9513e22769d3f1fd9c22cb3a589c22105 100644 (file)
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -187,7 +187,7 @@ class Modal extends BaseComponent {
   }
 
   dispose() {
-    [window, this._element, this._dialog]
+    [window, this._dialog]
       .forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY))
 
     super.dispose()

diff --git a/js/src/toast.js b/js/src/toast.js
index 01b994e28548f6a02fa6c439ab6927acef736da0..5d762b29da062b873aa50638d071d9abd041454f 100644 (file)
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -156,8 +156,6 @@ class Toast extends BaseComponent {
       this._element.classList.remove(CLASS_NAME_SHOW)
     }
 
-    EventHandler.off(this._element, EVENT_CLICK_DISMISS)
-
     super.dispose()
     this._config = null
   }

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index a66e1ad41e54b5a28c862aaaeaefd180bb276eb0..2bfa42fc70e5b113d89ea8b145af3821cedae373 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -215,7 +215,6 @@ class Tooltip extends BaseComponent {
   dispose() {
     clearTimeout(this._timeout)
 
-    EventHandler.off(this._element, this.constructor.EVENT_KEY)
     EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
 
     if (this.tip && this.tip.parentNode) {