javascript - addEventListener does not appear to work for change event -

just simple js snippet:

html:

<input type="text" id="t1"> <input type="text" id="t2"> 

javascript:

var t1 = document.getelementbyid('t1'); var t2 = document.getelementbyid('t2');  t1.addeventlistener('keyup', function () {     t2.value = t1.value.touppercase(); });  t2.addeventlistener('change propertychange input', function () {     alert('dd'); }); 

as can see, t2's change event never triggered! pretty simple , no need more description. tested out in 'chrome version 56.0.2924.87 (64-bit)' , 'firefox 52.0(32-bit)'. have idea?

update:

it should t2.addeventlistener:

t2.addeventlistener('change', function () {     alert('dd'); }); 

or

$("#t2").on('change propertychange input',function(){     // here...... }); 

update again:

actually, there no t1 typing or changing event. i'm using sample. thing want need know when t2's value changed functions. so, think should focus on t2, not t1.

update three:

i believe guys used google autocomplete before. snippet likes this:

autocomplete = new google.maps.places.autocomplete(     // ....... ); autocomplete.addlistener('place_changed', fillinaddress);  function fillinaddress(){     t2.val(......); } 

but, thing is, don't want put trigger thing in 'fillinaddress', instead, want capture changed event in addeventlistener or on('change') on t2, wrote before ...

final update:

still can't figure out why t2 'change' event can not triggered. however, put in t1 @kind user did , problem resolved. if have ideas, i'm appreciate if share me!

in honest opinion, bet op desires alert fire if t2 input value change caused change of t1 input.

note: moment, it's jquery solution.

$('#t1').on('keyup', function() {    $('#t2').val($(this).val().touppercase()).change();  });    $('#t2').on('change', function() {    alert('dd');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" id="t1">  <input type="text" id="t2">