Преобразовать этот JQuery врезку для ванили Javascript (фокус не работает)

Question

Я пытаюсь преобразовать это JQuery фрагмент кода в ванильным 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 Отрывок

$(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"); 
    }); 

}); 

Vanilla Отрывок, который не работает

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

Использование

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

имеет тот же эффект, как с помощью:

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

Фрагмент JQuery ждет DOMContentLoaded события. Твой нет. Это может быть причиной этой проблемы. Попробуйте заменить последнюю строку:

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

Answer 2

Я не уверен, почему работает код jQuery.

«фокус» и «размытие» являются родными <input> события.

Для того, чтобы ваш код работал, либо измените formGroupSelector = 'js-form-group', на formGroupSelector = 'js-form-input',, либо измените тег ввода, чтобы иметь класс js-form-group.

Вот небольшая рабочая копия кода в jsbin:

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

Btw, хорошая работа для канав JQuery, отличный способ узнать о JavaScript.

UPDATE

Я знаю, почему JQuery работает. http://api.jquery.com/on/

Большинство из браузера событий пузыря, или распространяться, от самого глубокого, самого внутреннего элемента (целевой) событие в документе, где они происходят весь путь до тела и элемента документа. В Internet Explorer 8 и ниже несколько событий, таких как изменение и отправка, не изначально пузырятся, но jQuery исправляет их, чтобы создать пузырь и создать последовательное поведение в разных браузерах.

И

фокуса и размытия события определяются с помощью W3C не пузырь, но JQuery определяет кроссбраузерный focusin и focusout событий, которые делают пузырь. Когда фокус и размытие используются для присоединения делегированных обработчиков событий, jQuery сопоставляет имена и поставляет их как focusin и focusout соответственно. Для согласованности и ясности используйте имена типов событий пузырьков.

Проще говоря, поскольку вы использовали 'on' jQuery, пузырьковое событие фокусировки вплоть до div, это не обычное поведение браузера.