Postback后EventListener未移除致计数器失效问题求助

问题现象 #

• 页面首次加载时，文本框字符计数器正常倒计时，触发的alert提示顺序为：
  • Add_Load
  • PageLoadStuff Start
  • PageLoadStuff Vars
  • PageLoadStuff Complete
  • PageLoadStuff Start
  • PageLoadStuff Vars
  • PageLoadStuff Complete
• 点击按钮触发Postback后，计数器彻底失效，alert提示变为：
  • It's a Postback!
  • null
• 页面未使用Update Panel，尝试移除并重新绑定EventListener后问题仍未解决。

编辑补充 #

在isPostback代码块中，若仅保留PageLoadStuff()调用，"PageLoadStuff Complete"的alert不会触发，推测代码在执行addEventListener时终止。

前端相关代码 #

<script type="text/javascript">

    function PageLoadStuff() {
        alert("PageLoadStuff Start");
        const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
        const label1 = document.getElementById('Label_Answer_Char_Count');
        const label2 = document.getElementById('Label_Answer_Char_Count2');
        const labelRemaining1 = document.getElementById('Label_Answer_Char_Remaining');
        const labelRemaining2 = document.getElementById('Label_Answer_Char_Remaining2');
        alert("PageLoadStuff Vars");

        // Add input event listener for text area
        textArea2.addEventListener('input', IncrementCounters);

        function IncrementCounters() {
            textCounter(textArea2, 3000, label1, labelRemaining1);
            textCounter2(textArea2, 865, label2, labelRemaining2);
            //        alert("Event Listener - DOMContentLoaded");
        }
        alert("PageLoadStuff Complete");
    }

    var isPostBack = '<%= this.IsPostBack%>' == 'True';
    if (isPostBack) {
        alert("It's a PostBack!");
        const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
        alert(textArea2);
        document.removeEventListener('DOMContentLoaded', PageLoadStuff);
        textArea2.removeEventListener('input', IncrementCounters);
        alert("EventListeners Removed");
        PageLoadStuff();

    }

    if (document.readyState == 'loading') {
        // still loading, wait for the event
        document.addEventListener('DOMContentLoaded', PageLoadStuff);
    } else {
        PageLoadStuff();
    }

    Sys.Application.add_load(function () {
        alert("Add_Load");
        PageLoadStuff();
    });

    function textCounter(field, maxlimit, label, label2) {
        if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit);
        else {

            label.innerHTML = maxlimit - field.value.length;
        }
        if (field.value.length > maxlimit - 500) {
            label.style.color = "#FF0000";
            label2.style.color = "#FF0000";
        }
        else {
            label.style.color = "#000000";
            label2.style.color = "#000000";
        }
    //    alert("textCounter Fired");
    }

    function textCounter2(field, maxlimit, label, label2) {
        if (field.value.length > maxlimit)
        field.value = field.value;
        else {

            label.innerHTML = maxlimit - field.value.length;
        }
        if (field.value.length > maxlimit - 200) {
            label.style.color = "#FF0000";
            label2.style.color = "#FF0000";
        }
        else {
            label.style.color = "#000000";
            label2.style.color = "#000000";
        }
    //    alert("textCounter2 Fired");
    }

</script>

<body>
  <table>
     <tr>
        <td></td>
        <td>
           <textarea id="TextBox_Follow_Up_Answer2" style="width: 600px; height: 120px;" maxlength="3000" runat="server"></textarea>
           <br />
           <span id="Label_Answer_Char_Count">3000</span>
           <span id="Label_Answer_Char_Remaining">characters remaining</span> :
           <span id="Label_Answer_Char_Count2">865</span>
           <span id="Label_Answer_Char_Remaining2">characters remaining for email</span>
           <br />
         </td>
     </tr>
     <tr style="background-color: lightgray; color: black; border-spacing: 0; padding: 0; border-collapse: collapse;">
        <td>
           <asp:Label ID="Label44" runat="server" Text="Article Number:"></asp:Label>
        </td>
        <td>
           <asp:TextBox ID="TextBox_Answer_Article_Number" runat="server" Width="300px" MaxLength="100"></asp:TextBox>
        </td>
     </tr>
     <tr>
        <td>
           <asp:Label ID="Label45" runat="server" Text="Section Number:"></asp:Label>
        </td>
        <td>
           <asp:TextBox ID="TextBox_Answer_Section_Number" runat="server" MaxLength="50" Width="300px"></asp:TextBox>
        </td>
     </tr>
     <tr style="background-color: lightgray; color: black; border-spacing: 0; padding: 0; border-collapse: collapse;">
        <td>
           <asp:Label ID="Label46" runat="server" Text="Actual Response Method:"></asp:Label>
           <asp:Label ID="Label65" runat="server" Text="*" ForeColor="Red" Font-Size="Large"></asp:Label>
        </td>
        <td>
           <asp:Button ID="Button_Create_Email" runat="server" Text="Create Email" CssClass="action_button" Height="22px" Width="200px" OnClick="Button_Create_Email_Click" />
        </td>
     </tr>
  </table>
</body>

后端按钮代码 #

protected void Button_Create_Email_Click(object sender, EventArgs e)
{
    string question;
    string article;
    string section;

    string answer = WebUtility.HtmlDecode(TextBox_Follow_Up_Answer2.Value);
    string answer_article = TextBox_Answer_Article_Number.Text;
    string answer_section = TextBox_Answer_Section_Number.Text;

    Page.ClientScript.RegisterStartupScript(this.GetType(), "email", "parent.location='mailto:Nobody@Noone.com?Subject=Coach Response for Answer" +
        "%0D%0A %0D%0AAnswer:  " + answer +
        "%0D%0AAnswer Article:  " + answer_article +
        "%0D%0AAnswer Section:  " + answer_section +
        "%0D%0A %0D%0AREMINDER: If this answers your question, please accept the answer in the Question Response Page.'"
        , true);
}

内容的提问来源于stack exchange，提问作者Johnny Bones