AddEventListener 不附加（单击按钮时没有任何反应）[重复]答案

【问题标题】：AddEventListener does not attach (nothing happens when button is clicked) [duplicate]AddEventListener 不附加（单击按钮时没有任何反应）[重复]
【发布时间】：2019-11-21 07:41:08
【问题描述】：

我在下面写了一些 JavaScript。它非常简单，并将一个事件添加到它的类找到的按钮中。但是，当我单击该按钮时，什么也没有发生。

请任何人帮忙，因为我已经有一段时间无法解决这个问题了，我就是无法得到它。

@extends('layouts.app')

@section('content')

 <h1>Create new</h1>

{{--  Purchase order --}}
 {{ Form::open(['route' => 'po.store']) }}

    {{ Form::label('supplier', 'Supplier') }}
    {{ Form::select('supplier', [$suppliers], null, ['placeholder' => 'Select a supplier...']) }}
    {{ Form::label('staff', 'Staff') }}
    {{ Form::select('staff', [$staff], null, ['placeholder' => 'Select a staff member']) }}
    {{ Form::label('status', 'Status' ) }}
    {{ Form::select('status', [$statuses]) }}
    <br>
    {{ Form::label('deliverto', 'Deliver To:') }}
    {{ Form::text('deliverto', '') }}
    <br>
    {{ Form::label('priceex', 'Price (ex VAT)') }}
    {{ Form::text('priceex') }}
    {{ Form::label('priceinc', 'Price (inc VAT)') }}
    {{ Form::text('priceinc') }}
    {{ Form::submit('Submit') }}

<hr>

{{-- Lines section--}}

 <table id="linesTable">
    <tr> {{--headings--}}
        <th>Code</th>
        <th>Quantity</th>
        <th>Description</th>
        <th>Price (ex VAT)</th>
        <th>Price (inc VAT)</th>
        <th>notes</th>
        <th></th>
    </tr>
     <tr>
         <td>{{Form::text("lines[0][code]")}}</td>
         <td>{{Form::text("lines[0][quantity]")}}</td>
         <td>{{Form::text("lines[0][description]")}}</td>
         <td>{{Form::text("lines[0][price_ex_vat]", null, ["class" => "textbox_prices"])}}</td>
         <td>{{Form::text("lines[0][price_inc_vat]", null, ["class" => "textbox_prices"])}}</td>
         <td>{{Form::text("lines[0][notes]")}}</td>
         <td><button type="button">Remove</button></td>

 </table>
 <button type="Button" id="addNew">Add New Line</button>

 {{ Form::close()}}

    <script type="text/javascript">
        document.getElementById("addNew").addEventListener("click", insertRow);
        function insertRow() {
            alert('hi');
        }

    </script>
@endsection

【问题讨论】：

控制台有错误吗？
人们在上面要求的是minimal reproducible example，详情请查看链接。请注意，我们不需要查看模板，我们需要查看浏览器看到的内容，即实际的 HTML。
@Lewis - 这是optional（但由于他们提供了另一个，所以一致性会很好）。
@T.J.Crowder 脑洞大开
@KawaLo - 1. 除非模板系统重新组织事物，否则获取元素的调用显然是在元素之后。 2. 如果不是，load 不是连接它的正确位置，在此过程中为时已晚（等待所有图像等）。相反，请确保脚本位于 HTML 的末尾，或者使用 defer，或者使用模块，或者使用 DOMContentLoaded 事件。

标签： javascript dom button addeventlistener

【解决方案1】：

我在这里发布被接受的评论。我不确定技术细节，但处理 DOM 解析的一个好习惯是在执行任何操作之前始终确保文档已完全加载。

这是一个如何做的例子：

window.addEventListener(‘DOMContentLoaded’, () => {
  // Add your event listeners here
  // Also better practice, declare your function before appending the listener
  function insertRow() {
    alert('hi');
  }
  document.getElementById("addNew").addEventListener("click", insertRow);
});

对我的评论进行两次修改：

首先，window.onload 不是处理事件的最佳方式。最好将eventListener 附加到窗口对象
其次，正如@T.J.Crowder 回答中提到的，load 事件等待整个页面充电，包括图像和其他内容。相反，更喜欢DOMContentLoadedevent，它会在 DOM 准备好后发出（但不等待所有辅助内容加载）。下面是文档：MDN - Doc

直接在 HTML 中添加 javascript 代码也不是一个很好的做法。更喜欢使用外部脚本，您在 HTML 末尾加载，就在 </body> 闭包标记之前（或之后），如下所示：

<script src=‘path_to_my_script/script.js’></script>

希望它能解决一切！

【讨论】：

谢谢，写得很好。

【解决方案2】：

JavaScript 的工作方式是您尝试在创建按钮之前设置事件侦听器。两种解决方案：

 window.addEventListener('DOMContentLoaded', (event) => {
   contentLoaded();
 });
 function contentLoaded()
 {
    document.getElementById("addNew").addEventListener("click", insertRow);
 }

或者你可以用 HTML 来做：

 <body onload="contentLoaded()">

【讨论】：