html之textarea标签、事件冒泡、文本域、回车换行、清除、清空、重置、stopPropagation、querySelector、replace、 、br、innerHTML

在HTML中，<textarea>标签用于创建多行文本输入控件。事件冒泡是指在事件传播过程中，事件会从最深层的元素开始，向上传播至最外层元素。文本域、清空、重置通常是与表单提交和处理相关的概念。

1. <textarea>标签：

<textarea rows="4" cols="50">
  这里可以输入文本...
</textarea>

2. 事件冒泡：

<button onclick="myFunction()">点击我</button>
 
<script>
function myFunction() {
  alert("按钮的点击事件被触发");
}
</script>

在这个例子中，当按钮被点击时，会触发myFunction()函数，然后弹出一个警告框。

3. 文本域（<textarea>）回车换行：

在<textarea>标签中输入文本时，按下回车键（Enter）会产生换行效果。

<textarea rows="4" cols="50">
  第一行文本
  第二行文本
</textarea>

4. 清空：

可以通过JavaScript设置<textarea>的value属性为空字符串来清空文本域。

<textarea id="myTextarea"></textarea>
<button onclick="clearTextArea()">清空</button>
 
<script>
function clearTextArea() {
  document.getElementById("myTextarea").value = "";
}
</script>

5. 重置：

可以通过给<form>元素添加reset()方法来重置整个表单，包括文本域。

<form id="myForm">
  <input type="text" value="已输入的文本">
  <textarea id="myTextarea">已输入的文本</textarea>
  <input type="reset">
</form>

6. 阻止事件冒泡：

在JavaScript中，可以使用event.stopPropagation()来阻止事件进一步冒泡。

<div onclick="alert('div clicked')">
  Click me
  <button onclick="event.stopPropagation(); alert('button clicked')">Click me</button>
</div>

在这个例子中，当点击按钮时，会弹出一个警告框显示“button clicked”，但是点击事件不会冒泡到div元素，因此不会弹出另一个警告框。