javascript - 是否有任何事件可以检测textarea的值变化？

Question

我有这个代码:

$("#textarea_id").on('input', function(e){
	alert('the value of textarea changed');
});

$("#bold").on('click', function(e){ $("#textarea_id").val('bold'); });
$("#italic").on('click', function(e){ $("#textarea_id").val('italic'); });
$("#underline").on('click', function(e){ $("#textarea_id").val('underline'); });
$("#center").on('click', function(e){ $("#textarea_id").val('center'); });
$("#leftside").on('click', function(e){ $("#textarea_id").val('leftside'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id = "textarea_id"></textarea>
<br>
<button id = "bold">B</button>
<button id = "italic">I</button>
<button id = "underline">U</button>
<button id = "center">C</button>
<button id = "leftside">L</button>

目前我正在使用 input 事件来检测文本区域更改的值。但正如你所见，它不起作用。我的意思是，当我单击每个按钮时，我没有看到此警报“textarea 的值已更改”。

我可以通过在这些末尾添加 .change() 来做到这一点:

$("#textarea_id").val('bold').change();
$("#textarea_id").val('bold').change();
.
.
.

但这不是我要找的。我需要一个基于文本区域上的更改的事件。所以我想在这里举办一个事件:

$("#textarea_id").on(' /* event here */ ', function(e){

还有什么事件比通过.val()改变textarea的值更敏感吗？

Answer 1

这是我的解决方案:

$(document).ready(function(){
	$("#textarea_id").on('input change', function(e) {
     alert('the value of textarea changed');
     });

	$(".myButton").click(function(){
		var elementValue = $(this).attr("id");
		$("#textarea_id").val(elementValue).trigger("change");
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<textarea id="textarea_id"></textarea>
<br>
<button class = "myButton"     id="bold">B</button>
<button class = "myButton"     id="italic">I</button>
<button class = "myButton"     id="underline">U</button>
<button class = "myButton"     id="center">C</button>
<button class = "myButton"     id="leftside">L</button>