JQuery метод изменения в ванильном JavaScript?

Я написал небольшой фрагмент кода jQuery ниже, в котором используется метод изменения. Я только что узнал, что jQuery больше не используется в проекте, поэтому мне нужно переписать метод изменения в Vanilla JS. Просто ищем некоторую помощь в том, как я могу это сделать. Вот код, он вытягивает значение одного входа и вводит его в другой.

(function(){

  $('#Email').change(function() {
    $('#UserName').val($(this).val());
  });

})();

Ответ 1

Браузеры зависят от того, как события должны быть прикреплены. Возможно, вы захотите начать с небольшого вспомогательного метода:

function addEventHandler(elem, eventType, handler) {
    if (elem.addEventListener)
        elem.addEventListener (eventType, handler, false);
    else if (elem.attachEvent)
        elem.attachEvent ('on' + eventType, handler); 
}

В следующем примере я предполагаю, что ваш IIFE действительно должен был быть событием, готовым к DOM. IIFE в вашем коде, похоже, на самом деле не служит какой-либо цели. Так...

В вашем коде есть два события: событие, готовое к DOM ("DOMContentLoaded"), и событие изменения элемента select ("onchange"). Используя вышеупомянутый помощник, ваш синтаксис jQuery преобразуется в:

addEventHandler(document, 'DOMContentLoaded', function() {
    addEventHandler(document.getElementById('Email'), 'change', function() {
        document.getElementById('UserName').value = this.value;
    });
});

Вот демо:

    function addEventHandler(elem, eventType, handler) {
        if (elem.addEventListener)
            elem.addEventListener (eventType, handler, false);
        else if (elem.attachEvent)
            elem.attachEvent ('on' + eventType, handler); 
    }

    addEventHandler(document, 'DOMContentLoaded', function() {
        addEventHandler(document.getElementById('Email'), 'change', function() {
            document.getElementById('UserName').value = this.value;
        });
    });

<select id="Email">
    <option value=""></option>
    <option value="Test 1">Test 1</option>
    <option value="Test 2">Test 2</option>
</select>

<input id="UserName" type="text" />

Ответ 2

Если вам не нужно поддерживать старую ИЭ, вы можете использовать querySelector + addEventListener:

document.querySelector('#Email').addEventListener('change',function(){
    document.querySelector('#UserName').value = this.value;
});

Визуально это выглядит так же, как и в случае с jQuery .on('change', fn) (что и вызывает .change()), просто более многословно.

Ответ 3

Существует change событие:

<select id="select"></select>

JS:

document.getElementById("select").onchange = function() { console.log("Changed!"); }