自定义事件事件处理程序未触发

Question

我正在将一小段JQuery转换为原始javascript。此处的代码用于控制表单的UI。

在调试器中，我能够看到在第36行，elem.dispatchEvent(checkValEvent)在每次运行或.foreach循环中反复触发，但是，“ checkval”事件的事件处理程序确实触发了。似乎找不到解决方案。

以下是Jquery代码的翻译（至少尝试翻译）。

var onClass = "on";
var showClass = "show";

elems.forEach(function(elem) {
   var checkValEvent = new CustomEvent("checkval");

   elem.addEventListener("changeval", function(e) {
      var label = e.target.parentElement.previousElementSibling;
      console.log(label)
      if (this.value !== "") {
         label.classList.add(showClass)
      } else {
         label.classList.remove(showClass)
      }
   })

   elem.addEventListener("keyup",function(e){
      e.dispatchEvent(checkValEvent)   
   })

   elem.addEventListener("focus",function(){
      label.classList.add(onClass)   
   })

   elem.addEventListener("blur",function(){
      label.classList.remove(onClass)  
   })

   elem.dispatchEvent(checkValEvent)
});

此外，如果有帮助，这是它的来源：

$(function() {
   var onClass = "on";
   var showClass = "show";

   $("input,textarea")
      .bind("checkval", function() {
         var label = $(this)
            .parent()
            .prev("label");
         if (this.value !== "") {
            label.addClass(showClass);
         } else {
            label.removeClass(showClass);
         }
      })
      .on("keyup", function() {
         $(this).trigger("checkval");
      })
      .on("focus", function() {
         $(this)
            .parent()
            .prev("label")
            .addClass(onClass);
      })
      .on("blur", function() {
         $(this)
            .parent()
            .prev("label")
            .removeClass(onClass);
      })
      .trigger("checkval");
});

我们将不胜感激你们可能想到的任何解决方法， 谢谢！