javascript - 将此 jQuery 片段转换为普通 javascript(焦点不起作用)

Question

我正在尝试将此 jQuery 代码段转换为普通 JavaScript，但我似乎在 focus 和 blur 事件方面遇到问题。

我似乎无法让我的回调函数在这些事件上执行。

为什么 jQuery 代码片段有效，而我的却无效？

HTML 代码段

form(class="form js-form" method="post" action="/contact")
  div.row
    div.col-sm-12
      div.form__group.js-form-group
        label(class="form__label js-form-label" for="name") Name
        input(class="form__input js-form-input" type="text" name="name" id="name" placeholder="Name" required)

  div.row
    div.col-sm-12
      div.form__group.js-form-group
        label(class="form__label js-form-label" for="email") Email
        input(class="form__input js-form-input" type="email" name="email" id="email" placeholder="Email" required)
  div.row
    div.col-sm-6
      div.form__group.js-form-group
        label(class="form__label js-form-label" for="occasion") Occasion
        input(class="form__input js-form-input" type="text" name="occasion" id="occasion" placeholder="Occasion" required)
    div.col-sm-6
      div.form__group.js-form-group
        label(class="form__label js-form-label" for="date") Date
        input(class="form__input js-form-input" type="date" name="date" id="date" placeholder="Date" required)
  div.row
   div.col-sm-12
     div.form__group.js-form-group
       label(class="form__label js-form-label" for="message")
       textarea(class="form__textarea js-form-input" name="message" id="message" placeholder="Message" required)
  div.row
    div.col-sm-12
      button.pull-right(class="form__submit js-form-submit" type="submit") Submit

jQuery 代码片段

$(function() {
  $(".js-form").on("input propertychange", ".js-form-group", function(e) {
    $(this).toggleClass("has-value", !!$(e.target).val());
    console.log(this);
  }).on("focus", ".js-form-group", function() {
    $(this).addClass("focused");
    console.log('focus');
  }).on("blur", ".js-form-group", function() {
    $(this).removeClass("focused");
    console.log("blur");
  });

});

原版代码片段不起作用

var formFloatingLabels = (function() {
  var formSelector = 'js-form',
    formGroupSelector = 'js-form-group',
    form = document.getElementsByClassName(formSelector)[0], 
    formGroup = null,
    focusedClass = 'focused',
    hasValueClass = 'has-value';

  if (!form) {
    return;
  }

  formGroup = form.getElementsByClassName(formGroupSelector);



  function init() {
    bindFormGroupEventListeners();
  }

  function toggleHasValueClass() {
    this.classList.toggle(hasValueClass);
  }

  function addFocusedClass() {
    console.log('focused');
  }

  function removeFocusedClass() {
    console.log('blurred');
  }

  function bindFormGroupEventListeners() {
    var currentFormGroup = null;
    for (var i = 0; i < formGroup.length; i++) {
      currentFormGroup = formGroup[i];

      currentFormGroup.addEventListener('input', toggleHasValueClass);
      currentFormGroup.addEventListener('focus', addFocusedClass);
      currentFormGroup.addEventListener('blur', removeFocusedClass);


    }
  }

  return {
    init: init
  }
})();

formFloatingLabels.init();

Answer 1

我不确定为什么 jQuery 代码可以工作。

“焦点”和“模糊”是原生的 <input>事件。

要使您的代码正常工作，请更改 formGroupSelector = 'js-form-group',至formGroupSelector = 'js-form-input',或者将输入标记更改为 js-form-group 类.

这是 jsbin 中代码的一个小型工作副本:

https://jsbin.com/wiwori/2/edit?html,js,console,output

顺便说一句，放弃 jQuery 干得好，这是学习 javascript 的好方法。

更新

我确实知道 jQuery 为何有效。 http://api.jquery.com/on/

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

还有

The focus and blur events are specified by the W3C to not bubble, but jQuery defines cross-browser focusin and focusout events that do bubble. When focus and blur are used to attach delegated event handlers, jQuery maps the names and delivers them as focusin and focusout respectively. For consistency and clarity, use the bubbling event type names.

简单地说，因为您使用“on”jQuery 将焦点事件冒泡到 div，所以这不是 native 浏览器行为。