Question

我正在尝试将此jQuery代码段转换为vanilla JavaScript，而我似乎遇到了焦点和模糊事件的问题。

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

为什么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 Snippet

$(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代码有效。

＆＃39;聚焦＆＃39;并且＆＃39;模糊＆＃39;是本机<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/

大多数浏览器事件从文档中最深的最内层元素（事件目标）起泡或传播，它们一直发生到正文和文档元素。在Internet Explorer 8及更低版本中，一些事件（如更改和提交）本身不会冒泡，但jQuery会将这些事件修补为冒泡并创建一致的跨浏览器行为。

和

焦点和模糊事件由W3C指定为不冒泡，但jQuery定义了跨浏览器的焦点和焦点输出事件。当焦点和模糊用于附加委托事件处理程序时，jQuery会映射名称并分别将它们作为focusin和focusout传递。为保持一致性和清晰度，请使用冒泡事件类型名称。

简单地说，因为您使用了＆＃39;＆＃39; jQuery将焦点事件冒充到div，这不是本机浏览器的行为。

Answer 2

使用

$(function () { //... })

与使用相同的效果：

$(document).ready(function () { //... })

jQuery代码段等待DOMContentLoaded个事件。你的没有。这可能只是问题的原因。尝试用以下代码替换最后一行：

document.addEventListener('DOMContentLoaded', formFloatingLabels.init, false);

Answer 3

为了让focus和blur处理非输入类型元素，他们必须有一个tabindex。

如果您为元素提供tabindex，则在单击时会收到焦点事件。

将此jQuery代码段转换为vanilla javascript（焦点不起作用）

3 个答案: