转换这个jQuery的片段香草的JavaScript（FOCUS不工作）

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

}); 

香草摘录不工作

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

顺便说一句，不错开沟jQuery的，伟大的方式来了解JavaScript的。

UPDATE

我不知道为什么jQuery的工作。 http://api.jquery.com/on/

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

而且

聚焦和模糊事件由W3C不气泡规定，但jQuery的定义跨浏览器的focusIn和事件的内容即做泡沫事件。当焦点和模糊用于附加委托事件处理程序时，jQuery会映射名称并分别将它们作为focusin和focusout提供。为了保持一致性和清晰度，请使用冒泡事件类型名称。

简而言之，因为您使用'on'jQuery将焦点事件冒泡到div，这不是本机浏览器行为。