は、その値が

Question

環境プログラムで変更されたときにテキストボックスを聴くための方法があります：。
のみのJavaScript（ノーjqueryのは:(）イベントハンドラは、変更には使用できません
ボタンクリック

する方法がありますときにその値がプログラムで変更された場合、テキストボックスに耳を傾ける？

<input type="button" id="button1" value="button" /> 
<input type="text" id="text1" /> 


var btn1 = document.getElementById('button1'); 
var txt1 = document.getElementById('text1'); 
btn1.onclick=function(){ txt1.value = 'hello world'} 

https://jsfiddle.net/yrt7e57w/

Answer 1

要素をプログラムで変更して、onChangeをトリガすることがわかりますが、それはiffy命題です。他の記事を見てみると、これは非常に有望です：あなたのテキスト要素では、setterとgetterをオーバーライドするので、キー付きの変更やプログラム的な変更が自動的に発生します。

var btn1 = document.getElementById('button1'); 
 
var txt1 = document.getElementById('text1'); 
 

 

 
btn1.onclick = function() { 
 
    txt1.value = 'hello world' 
 
    } 
 
    
 
txt1.addEventListener("change", function(e){ 
 
    console.log(txt1.value); 
 
}) 
 
    
 
    //property mutation for hidden input 
 
Object.defineProperty(txt1, "value", { 
 
    // Don't override the getter, but stub it in. 
 
    get: function() { 
 
    return this.getAttribute("value"); 
 
    }, 
 
    // In the setter, we want to set the value 
 
    // and also fire off the change event. 
 
    // By doing this, the coder changing the 
 
    // value never needs worry about it. 
 
    set: function(val) { 
 
    console.log("set"); 
 

 
    // handle value change here 
 
    this.setAttribute("value", val); 
 

 
    //fire the event 
 
    if ("createEvent" in document) { //NON IE browsers 
 
     var evt = document.createEvent("HTMLEvents"); 
 
     evt.initEvent("change", false, true); 
 
     txt1.dispatchEvent(evt); 
 
    } else { //IE 
 
     var evt = document.createEventObject(); 
 
     txt1.fireEvent("onchange", evt); 
 
    } 
 
    } 
 
});

<input type="button" id="button1" value="button" /> 
 
<input type="text" id="text1" />

またはNULL値を持つものとしてクリックハンドラは、入力を示している理由について、あなたの質問に答えるために、それは/理由ゲッターだ、だから、フィドルとしてHere

をそれを参照してくださいsetterがデフォルト値の振る舞いをオーバーライドしています。この問題を回避する最も簡単な方法は、value属性へのインタフェースとして機能するようにカスタムのゲッター/セッターを作成することです：

var btn1 = document.getElementById('button1'); 
 
var txt1 = document.getElementById('text1'); 
 

 
btn1.onclick = function() { 
 
    console.log("in the button's click handler, "); 
 
    console.log("Value is: " + txt1.val); 
 
    console.log("--------------------------------") 
 
    txt1.val = 'hello world' 
 
} 
 

 
txt1.addEventListener("change", function(e) { 
 
    console.log("in txt1.onChange function...") 
 
    console.log(this.val); 
 
    console.log("--------------------------------") 
 
}) 
 

 

 
//property mutation for hidden input 
 
Object.defineProperty(txt1, "val", { 
 
    get: function() { 
 
    return this.value; 
 
    }, 
 
    set: function(val) { 
 
    // handle value change here 
 
    this.value = val; 
 

 
    //fire the event 
 
    if ("createEvent" in document) { //NON IE browsers 
 
     var evt = document.createEvent("HTMLEvents"); 
 
     evt.initEvent("change", false, true); 
 
     txt1.dispatchEvent(evt); 
 
    } else { //IE 
 
     var evt = document.createEventObject(); 
 
     txt1.fireEvent("onchange", evt); 
 
    } 
 
    } 
 
});

<input type="button" id="button1" value="button" /> 
 
<input type="text" id="text1" />

ボタンがクリックされたときには、ここで何が起こっている、I入力のval属性を取得し（舞台裏で値を取得する）、同じ入力（value属性を設定する）のval属性をプログラムで設定します。なんらかの理由で、入力の値属性にobject.definePropertyのget/setを完全に壊さずに使用することはできません。コンソールでは、3つの関数呼び出しが表示されます。ボタンをクリックすると、入力がフォーカスを失って変更メソッドがトリガされますが、ボタン自体がクリックハンドラをトリガし、入力ハンドラがトリガされ、もう一度ハンドラを変更してください。

希望すると便利です。

再び、これをfiddleとして見る

Answer 2

をあなたはelement.dispatchEvent(event)を使用することができますプログラムでテキストを変更します。それは正確にDOMに変更されていないとして、独自のジャストaddEventListenerが動作しません

var btn1 = document.getElementById('button1'); 
var txt1 = document.getElementById('text1'); 

btn1.addEventListener("click", function() { // Add to OnClick of button. 
    txt1.dispatchEvent(new Event('change')); // force change event to run on textbox. 
}); 

txt1.addEventListener("change", function(e){ // EventListener for OnChange of the element. 
    alert("changed"); 
}); 

：あなたの例では、それは次のようになります。

上記は、いくつかのキーの押下を要求するが、はるかに保守性や再利用可能なソリューションのために、（おそらく、この質問へのほとんどの他の回答）Snowmonkeyの答え、https://stackoverflow.com/a/44708746/640263をチェックアウトするシンプルなソリューションです。

Answer 3

たぶんこれは、過剰です
いますが、listen to an attribute changeにmutationObserver apiを使用することができ、
あなたがしてsetAttributeメソッドを介して値を変更する必要があります：

var btn1 = document.getElementById('button1'); 
 
var txt1 = document.getElementById('text1'); 
 

 
btn1.onclick=function(){ txt1.setAttribute('value', 'hello world') } 
 

 
// create an observer instance 
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    console.log(mutation); 
 
    });  
 
}); 
 
    
 
// configuration of the observer: 
 
var config = { attributes:true }; 
 
    
 
// pass in the target node, as well as the observer options 
 
observer.observe(txt1, config);

<input type="button" id="button1" value="button" /> 
 
<input type="text" id="text1" />