提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

限制文本框的字数长度以及设置右下角动态的字数显示使用步骤1. 获取事件2. 事件监听3.不断得到文本域里面的长度

前言

通过事件监听不断获得文本框中的数字长度，从而动态显示字数

提示：以下是本篇文章正文内容，下面案例可供参考

使用步骤

1.HTML代码

代码如下（示例）：

<div class="w"><div class="controls"><img src="images/tip.png" alt=""><br><textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea><div><span class="useCount">0</span><span>/</span><span>200</span><button id="send">发布</button></div></div><div class="contentList"><ul></ul></div></div>

2.JavaScript代码

代码如下（示例）：

<script>// 1. 获取事件 let area = document.querySelector('#area');let useCount = document.querySelector('.useCount');// 2. 事件监听area.addEventListener('input', () => {//console.log(111);// 不断得到文本域里面的长度//console.log(area.value.length);useCount.innerHTML = area.value.length; })</script>

该处使用的是input用户输入事件响应，。

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了addEventListener的使用，而addEventListener提供了一些能使我们快速便捷地获得鼠标响应的事件。