如何编写通用函数，无需指定名称修改触发事件的Textarea文本颜色

数据老陈

2026-8-1

通用Textarea文本颜色修改函数实现

核心思路

利用事件对象的event.target属性，直接获取触发事件的Textarea元素，无需提前指定元素ID或名称，实现函数的通用性。

实现方式一：直接绑定事件到每个Textarea

HTML代码

<textarea onkeydown="selectTextAreaWithioutName(event)"></textarea>
<textarea onkeydown="selectTextAreaWithioutName(event)"></textarea>
<textarea onkeydown="selectTextAreaWithioutName(event)"></textarea>

JavaScript函数

function selectTextAreaWithioutName(event) {
  // 获取触发keydown事件的Textarea元素
  const currentTextarea = event.target;
  // 修改文本颜色（示例设为红色，可自定义颜色值）
  currentTextarea.style.color = '#ff0000';
}

关键说明

调用函数时必须传入event参数，这是获取触发元素的核心
event.target会精准指向当前触发事件的DOM元素，不管是哪个Textarea触发，都能正确获取

实现方式二：事件委托（更适合动态场景）

如果页面中的Textarea是动态生成的，或者数量较多，推荐用事件委托方式，只需给父元素绑定一次事件即可：

HTML代码

<div id="textarea-group">
  <textarea></textarea>
  <textarea></textarea>
  <!-- 后续新增的Textarea也会自动生效 -->
</div>

JavaScript代码

// 给父元素绑定keydown事件
document.getElementById('textarea-group').addEventListener('keydown', function(event) {
  // 判断触发事件的元素是否为Textarea
  if (event.target.tagName === 'TEXTAREA') {
    // 修改文本颜色
    event.target.style.color = '#ff0000';
  }
});