![](/img/trans.png)
[英]Is there a way to view the vanilla JavaScript equivalent of a jQuery method?
[英]jQuery change method in vanilla JavaScript?
我在下面寫了一小段使用change方法的jQuery代碼。 我剛剛發現jQuery不再在項目中使用,所以我需要在Vanilla JS中重新編寫change方法。 只是尋求一些幫助我如何做到這一點。 這是代碼,它拉取一個輸入的值並將其輸入另一個輸入。
(function(){
$('#Email').change(function() {
$('#UserName').val($(this).val());
});
})();
如果您不需要支持舊的IE,可以使用querySelector + addEventListener :
document.querySelector('#Email').addEventListener('change',function(){
document.querySelector('#UserName').value = this.value;
});
在視覺上它看起來就像jQuery的.on('change', fn)
(這是.change()
調用),只是更詳細。
瀏覽器因事件的附加方式而異。 您可能想要從一個小幫助方法開始:
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事件(“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" />
有change
事件 :
<select id="select"></select>
JS:
document.getElementById("select").onchange = function() { console.log("Changed!"); }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.