轉換這個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，這不是本機瀏覽器行爲。