addeventlistener 相关问题

一种DOM事件方法，用于将事件侦听器添加到给定的DOM节点

单击计算器练习时出现 addEventListener 错误

我是 JS 的初学者，刚刚获得了 HTML 中的计算器模板，我正在尝试通过 JS 构建其功能。我首先从添加按钮开始。我写了下面的代码，

javascript html addeventlistener

回答 1 投票 0

怎样才能让我的蛇动作不延迟

我正在制作一个贪吃蛇游戏，但是当我按下按键时我遇到了一个问题，我的间隔暂停了很长一段时间，我不想让它暂停，我希望它继续下去 const trackMovemen...

javascript addeventlistener

回答 1 投票 0

使用addEventListener移除Child

我刚刚学习javascript。在谷歌 Chrome 控制台上测试东西我最终得到了这个： ... 我刚刚学习javascript。在谷歌 Chrome 控制台上测试东西我最终得到了这个： <html> <head></head> <body> <div id="divi"> <button id="butti">Click Me</button> </div> </body> </html> 还有Js： function cBoton (){ var getDiv = document.getElementById("divi"); getDiv.removeChild(getDiv.lastChild); }; var getButton = document.getElementById("butti"); getButton.addEventListener("click", cBoton); 我希望按钮一点击就被删除。 ¿为什么只有在第二次点击后才起作用？ tx！标记中元素的 .lastChild 是 ""（尝试使用 console.log(getDiv.lastChild) 进行澄清）。使用它来确保您正在删除所需的元素： function cBoton() { var getDiv = document.getElementById("divi"); getDiv.removeChild(getButton); }; 第一次单击时，divi的最后一个子节点是包含按钮后空格的文本节点，并且该节点将被删除。第二次单击时，该按钮是最后一个子按钮。无价之宝.. 修改源码； /* .css */ div :nth-child(even){background-color: #f2f2f2} /*.js */ function addDiv() { var para = document.createElement("p"); var node = document.createTextNode('textHere'); // add cell code here para.appendChild(node); var element; element = document.getElementById("div1"); // to add div id recursion element.appendChild(para); } function cBoton (){ var getDiv = document.getElementById("div1"); getDiv.removeChild(getDiv.lastChild); } var getButton = document.getElementById("div1"); getButton.addEventListener("click", cBoton); /* HTML */ <html> <head></head> <body> <button onclick="addDiv()">add</button> <button onclick="cBoton()">Click Me</button> <frameset><legend>recursions</legend> <div id="div1"></div> </frameset> </body> </html> 副驾驶更新！您的第一个代码片段需要单击两次才能删除按钮的原因是 DOM（文档对象模型）的结构方式。当您第一次加载页面时，ID 为 divi 的 div 元素只有一个子元素，即按钮元素。但是，当您第一次单击按钮时，由于按钮元素后面有空格或换行符，会在 div 内创建一个文本节点（在 DOM 中被视为子节点）。因此，按钮不再是最后一个子节点，文本节点才是。这就是为什么需要点击两次才能删除按钮。对于您的第二个代码片段，您似乎试图在单击“添加”按钮时向 div 添加一个段落，并在单击“单击我”按钮时删除 div 的最后一个子级。但是，您的代码中有一个错误。您尝试向 div 添加事件侦听器，而不是“Click Me”按钮。这是更正后的版本： function addDiv() { var para = document.createElement("p"); var node = document.createTextNode('textHere'); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); } function cBoton() { var getDiv = document.getElementById("div1"); getDiv.removeChild(getDiv.lastChild); } var getButton = document.getElementById("butti"); // Corrected here getButton.addEventListener("click", cBoton); <html> <head></head> <body> <button id="addButton" onclick="addDiv()">add</button>  <button id="butti" onclick="cBoton()">Click Me</button>  <frameset><legend>recursions</legend> <div id="div1"></div> </frameset> </body> </html> 这应该按预期工作。 “添加”按钮将向 div 添加一个段落，“Click Me”按钮将删除该 div 的最后一个子级。使用 JavaScript 时，请记住始终检查 DOM 的结构和元素的 id。快乐编码！

javascript onclick click addeventlistener removechild

回答 4 投票 0

两次调用addEventLister有什么作用？

elemen.addEventListener('点击',func,false); elemen.addEventListener('点击',func,false); 单击 elemen 时，函数 func 会被调用两次，还是只调用一次？如果调用两次，则为

javascript addeventlistener

回答 2 投票 0

为什么我的按钮点击后没有运行功能？

我使用此代码在按下按钮时发生一些事情：函数服务器设置按钮（）{ 控制台.log(“测试”); }; document.getElementById("服务器设置按钮&quo...

javascript html button addeventlistener

回答 1 投票 0

按下并按住按钮的事件监听器

寻找一种当用户按下并按住按钮时激活的事件侦听器，以及另一种侦听用户不再按下按钮的 EL。如果不是很清楚我想要什么，那么让我...

addeventlistener mouseleave mousedown

回答 1 投票 0

按下并按住按钮的事件监听器

寻找一种当用户按下并按住按钮时激活的事件侦听器，以及另一种侦听用户不再按下按钮的 EL 如果不是很清楚我想要什么，那么让我...

addeventlistener mouseleave mousedown

回答 1 投票 0

js for 循环innerHTML 函数在加载相同id 时不起作用

for循环innerHTML +=不起作用富巴 document.getElementById('outSecs').</desc> <question vote="-1"> <p>在 addeventlistener 负载上调用函数时，for 循环 insideHTML += 不起作用</p> <pre><code><main id='outSecs'> foobar </main> <script> document.getElementById('outSecs').addEventListener('load', myFn); function myFn() { for (var q = 1; q <= 9; q++) { document.getElementById('outSecs').innerHTML += "<section><p class='myOutput'></p></section>"; } } </code></pre> <p>如何在加载时插入带有innerHTML的循环代码？</p> </question> <answer tick="false" vote="0"> <p>我建议你使用窗口的 DOMContentLoaded 事件。</p> <p>代码也可以更优雅。无需每次都获取主容器。只需获取一次并填充即可。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const myFn = () => { const mainContainer = document.getElementById('outSecs'); mainContainer.innerHTML = Array.from({ length: 9 }) .map((_, i) => `<section id="s${i}"><p class="myOutput">${i+1}</p></section>`) .join('') }; window.addEventListener('DOMContentLoaded', myFn)</code></pre> <pre><code><main id='outSecs'> foobar </main></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript html dom addeventlistener getelementbyid

回答 0 投票 0

documnt.addEventListener 导致“未捕获的类型错误‘属性handleEvent’不可调用。”

我有一个简单的 HTML 文件，它加载脚本“asyncLoader.js”： ...

dom firefox addeventlistener

回答 1 投票 0

如何在javascript中访问尚未创建的元素？

我正在完成 TheOdinProject 的 Etch-a-Sketch 项目。我想访问网格的单元格以更改其颜色，但它们是在 for() 循环的范围内创建的，并且 for() 循环是 insi...

javascript html frontend addeventlistener event-listener

回答 1 投票 0

如何避免在制作输入元素之前选择它们？

给我带来麻烦的代码块是这样的： btn.addEventListener('点击', ()=> { 如果（！gamePlay）{ 游戏=真 btn.innerHTML="检查组合" 制作游戏(6) } 否则...

javascript input addeventlistener

回答 1 投票 0

延迟后通过新输入值清除输入值的功能不起作用

我正在尝试创建一个函数，通过在 2 秒延迟后输入的新文本来清除输入值。起初它有效，但现在由于某种原因，它只是将输入的值替换为...

javascript html addeventlistener

回答 1 投票 0

有没有办法简化这段代码，避免每次手动调用`onDestroy`？

我们在 SvelteKit 应用程序的多个位置使用 EventSource，如下所示：从 'svelte' 导入 { onDestroy } ；从'$lib/events'导入{customEventSource}；常量回调...</desc> <question vote="0"> <p>我们在 SvelteKit 应用程序的多个位置使用 EventSource，如下所示：</p> <pre><code><script> import { onDestroy } from 'svelte'; import { customEventSource } from '$lib/events'; const callback = (event: MessageEvent) => { console.log('event:', event); }; customEventSource.addEventListener('message', callback); onDestroy(() => { customEventSource.removeEventListener('message', callback); }); </script> </code></pre> <p>正如你所见，每次都有很多东西要写。</p> <p>难道没有一种神奇的方法 - 正如 Svelte 教给我们的那样 - 来简化吗？</p> <p>特别是这样我就不必每次都<strong>手动</strong>打电话<pre><code>onDestroy</code></pre>？</p> </question> <answer tick="false" vote="0"> <p>我想这样的事情会起作用：</p> <pre><code>// This is a helper file. import { onDestroy } from 'svelte' import { customEventSource } from '$lib/events' export function listenForMessages(listener){ customEventSource.addEventListener('message', listener) onDestroy(() => customEventSource.removeEventListener('message', listener)) } </code></pre> <p>在您的组件中：</p> <pre><code><script> import { listenForMessages } from './the-file.js' listenForMessages((event) => { console.log('event:', event) }) </script> </code></pre> </answer> </body></html>

svelte addeventlistener server-sent-events removeeventlistener

回答 0 投票 0

HTMX hx：afterRequest 事件未调用

我需要在调用 HTMX 请求后调用一些 JS，如下所示： document.addEventListener('htmx:afterRequest', updateConnections()) 在 updateConnections() 中，我需要重新分配一些参考...

javascript addeventlistener htmx

回答 2 投票 0

Javascript“onChange”不会在元素值更改时触发

我的大概 HTML：自动化状态我的大概 HTML： <td style="width: 25%"> <label class="io-label" for="custom_automation_status">Automation Status <span class="form-required">*</span> </label> <select name="dropdown_status" style="display: none;"> <option value=""></option> <option value="1"> Option 1</option> <option value="2"> Option 2</option> <option value="3"> Option 3</option> <option value="4"> Option 4</option> </select> <div id="dropdown_status23_chzn" class="chzn-container" style="width: 100%;"> <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> <span>Option 1</span> </a> </div> </td> 我的JavaScript： $(document).ready(function() { startProgram(); }); function startProgram() { let automationStatusElement = document.getElementsByName("dropdown_status")[0].nextSibling.children[0].children[0]; automationStatusElement.addEventListener('change', function() { console.log("dropdown_status changed"); }); } 当我更改下拉选项时 - 它会更改 <span>Option 1</span> 文本，但我无法触发事件 console.log("dropdown_status changed");。我验证了 automationStatusElement 变量具有正确的元素。它只是检测不到变化。我在这里缺少什么帮助吗？谢谢您可能想做这样的事情； const drop = document.querySelector("[name=dropdown_status]"); drop.addEventListener("change", (e) => { const selectedOption = e.target[e.target.options.selectedIndex].text; const span = document.querySelector("a > span"); span.textContent = selectedOption; }) <td style="width: 25%"> <label class="io-label" for="custom_automation_status">Automation Status <span class="form-required">*</span> </label> <select name="dropdown_status"> <option value=""></option> <option value="1"> Option 1</option> <option value="2"> Option 2</option> <option value="3"> Option 3</option> <option value="4"> Option 4</option> </select> <div id="dropdown_status23_chzn" class="chzn-container" style="width: 100%;"> <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> <span>Option 1</span> </a> </div> </td>

javascript addeventlistener onchange

回答 1 投票 0

为什么我的所有元素都接收自上次元素迭代以来的事件侦听器更改？

我在将自定义事件侦听器应用于容器中的每个元素时遇到问题。 HTML： E

javascript css event-handling addeventlistener arrow-functions

回答 0 投票 0

如何仅触发一次 window.scrollY

我只尝试触发一次 window.scrollY ，目前我的下面的代码工作正常，但触发了多次。当我运行这段代码时，它多次触发，我想停止它，只有窗口滚动...

javascript function scroll addeventlistener

回答 1 投票 0

在联系表单末尾添加事件侦听器以跟踪转化（Google 跟踪代码管理器）

希望你能帮我解决一个小问题。我想在 Facebook 上发布一个帖子，该帖子将指向一个嵌入联系表单的网站。我想在用户使用后添加一个事件侦听器