Question

我在下面写了一小段使用change方法的jQuery代码。我刚刚发现jQuery不再在项目中使用，所以我需要在Vanilla JS中重新编写change方法。只是寻求一些帮助我如何做到这一点。这是代码，它拉取一个输入的值并将其输入另一个输入。

(function(){

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

})();

Answer 1

如果您不需要支持旧的IE，可以使用querySelector + addEventListener：

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

在视觉上它看起来就像jQuery的.on('change', fn)（.change()调用的那样），只是更详细。

Answer 2

浏览器因事件的附加方式而异。你可能想要从一个小帮手方法开始：

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

对于以下示例，我将假设您的IIFE应该确实是一个DOM-ready事件。您的代码中的IIFE似乎并没有真正用于任何目的。所以......

您的代码中有两个事件，即DOM-ready事件（＆＃34; DOMContentLoaded＆＃34;）和select元素的更改事件（＆＃34; onchange＆＃34;）。利用上面的帮助程序，您的jQuery语法转换为：

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

Working jsFiddle Demo

Answer 3

有change event：

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

JS：

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

在vanilla JavaScript中使用jQuery更改方法？

3 个答案: