原版 JavaScript 中的 jQuery 更改方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24172963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery change method in vanilla JavaScript?
提问by Stavros_S
I wrote a little piece of jQuery code below that uses the change method. I just found out jQuery is no longer being used in the project so I need to re-write the change method in Vanilla JS. Just looking for some assistance on how I can do that. Here is the code, it pulls the value of one input and enters it into another.
我在下面写了一小段使用 change 方法的 jQuery 代码。我刚刚发现项目中不再使用 jQuery，所以我需要在 Vanilla JS 中重新编写更改方法。只是在寻找有关如何做到这一点的帮助。这是代码，它提取一个输入的值并将其输入另一个。
(function(){
$('#Email').change(function() {
$('#UserName').val($(this).val());
});
})();
回答by RaphaelDDL
If you don't need to support old IEs, you can use querySelector+ addEventListener:
如果你不需要支持旧的 IE，你可以使用querySelector+ addEventListener：
document.querySelector('#Email').addEventListener('change',function(){
document.querySelector('#UserName').value = this.value;
});
Visually it looks just like it would with jQuery's .on('change', fn)(which is what .change()calls), just more verbose.
从视觉上看，它看起来就像使用 jQuery 的.on('change', fn)（这就是.change()所谓的）一样，只是更冗长。
回答by C???
Browsers vary on how events should be attached. You'd probably want to start with a little helper method:
浏览器因应如何附加事件而异。您可能想从一个小助手方法开始：
function addEventHandler(elem, eventType, handler) {
if (elem.addEventListener)
elem.addEventListener (eventType, handler, false);
else if (elem.attachEvent)
elem.attachEvent ('on' + eventType, handler);
}
For the following sample, I'm going to assume that your IIFE should have really been a DOM-ready event. The IIFE in your code doesn't seem to really serve any purpose. So...
对于下面的示例，我将假设您的 IIFE 应该确实是一个 DOM 就绪事件。您代码中的 IIFE 似乎并没有真正起到任何作用。所以...
There are two events from your code, the DOM-ready event ("DOMContentLoaded") and the select element's change event ("onchange"). Taking advantage of the above helper, your jQuery syntax translates to:
您的代码有两个事件，DOM 就绪事件（“DOMContentLoaded”）和选择元素的更改事件（“onchange”）。利用上述帮助程序，您的 jQuery 语法转换为：
addEventHandler(document, 'DOMContentLoaded', function() {
addEventHandler(document.getElementById('Email'), 'change', function() {
document.getElementById('UserName').value = this.value;
});
});
Here's a demo:
这是一个演示：
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" />回答by tymeJV
There is the changeevent:
有change事件：
<select id="select"></select>
JS:
JS：
document.getElementById("select").onchange = function() { console.log("Changed!"); }
