vue: FormLegacyValuespec: reduced needless registration of event list…

…eners

Change-Id: Ibd92c1b422379cc4529a1e0320605e17596af939

packages/cmk-frontend-vue/src/form/components/forms/FormLegacyValueSpec.vue

@@ -46,13 +46,11 @@ onMounted(() => {
   window['cmk'].forms.enable_dynamic_form_elements(legacyDOM.value!)
   // @ts-expect-error comes from different javascript file
   window['cmk'].valuespecs.initialize_autocompleters(legacyDOM.value!)
-  addEventListeners()
+  updateEventListeners()
 
   const observer = new MutationObserver(() => {
     collectData()
-    // On every mutation, we need to remove and re-add the event listeners
-    removeEventListeners()
-    addEventListeners()
+    updateEventListeners()
   })
 
   observer.observe(legacyDOM.value!, {
@@ -68,18 +66,18 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  removeEventListeners()
-})
-
-function addEventListeners() {
   legacyDOM.value!.querySelectorAll(QUERY_INPUT_OBSERVER).forEach((element) => {
-    element.addEventListener('input', collectData)
+    element.removeEventListener('input', collectData)
   })
-}
+})
 
-function removeEventListeners() {
+function updateEventListeners() {
   legacyDOM.value!.querySelectorAll(QUERY_INPUT_OBSERVER).forEach((element) => {
-    element.removeEventListener('input', collectData)
+    if (element.getAttribute('data-has-event-listener') === 'true') {
+      return
+    }
+    element.setAttribute('data-has-event-listener', 'true')
+    element.addEventListener('input', collectData)
   })
 }