jQueryのchangeがdocument.getElementById().valueで上書きしたときに発火しない

Question

ボタンを押したとき，
・textareaに文字列(例ではBUTTON)を追加
・それに応じて<p>にtextareaと同じ文字列を表示
させたいです．

<input type="button" onClick="myfunc()">
<textarea id="textarea"></textarea>
<p id="p"></p>

function myfunc(){
  document.getElementById("textarea").value += "BUTTON";
}

/*jQuery*/
$(function(){
    $("#textarea").change(function() {
        var text = $(this).val();
        $("#p").text(text);
    });
});

現状では，textareaに直接入力したときには<p>に反映されるのですが，ボタンを押した際のtextareaの変更時には<p>に反映されません．

アドバイスなどいただければ幸いです．
よろしくお願いいたします．