Sự kiện `change` vơi input

[ttn]

Chào các bạn mình có chút thắc mắc mong các bạn giải đáp giúp, mình đoạn code như này

<input type="text" value="Hello World!"/>

<div>
  <button value="one">One</button>
  <button value="two">Two</button>
  <button value="three">Three</button>
</div>

let input = document.getElementsByTagName( 'input' )[0],
    button = document.getElementsByTagName( 'button' );

// INPUT EVENT
input.addEventListener( 'change', () => {
  alert( 'Changed!' );
} );

// EVENT WHEN BUTTON CLICK
for( let i = 0; i < button.length; i++ ){
    button[i].addEventListener( 'click', () => {
    let a = button[i];
    input.value = a.value;
  } );
}

Khi thay đổi value (nhập bằng tay) trong input thay đổi thì sẽ hiện lên 1 cái alert: Changed!
Nhưng khi mình click vào mấy cái button ở dưới thì value của input cũng thay dổi nhưng ko có alert nào hiện lên cả. Giờ mình muốn khi click vào mấy cái button -> value của input thay đổi -> hiện lên alert thì phải ràng buộc hay gán sự kiện nào ưnã mọi người? Mình mới tập tành về js mong các bạn giưps đỡ ạ

Demo online:
https://codepen.io/niti/pen/zRbMEv ( deprecated )
https://codepen.io/notrealdev/pen/ZrdrRJ ( tested with IE 11 )

[drgnz]

Thì mình trigger giúp nó là được
Tìm hiểu về hàm dispatchEvent nhé

[ttn]

cám ơn bạn nhé, mình làm đc rồi, nhưng hiện tại đang có 2 hàm này bị phản đối deprecated, để mình tìm cách khác xem sao

document.createEvent();
elem.initEvent();