开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在appendChild之后，addEventListener不工作

的原因可能是由于以下几个方面：

元素未正确添加到DOM树中：在使用appendChild方法将元素添加到DOM树之前，确保元素已经被正确创建并设置了相应的属性和内容。如果元素未正确添加到DOM树中，那么后续的addEventListener方法将无法生效。
事件监听器未正确绑定：确保正确绑定了事件监听器。在使用addEventListener方法时，需要指定事件类型和相应的处理函数。例如，如果要监听点击事件，可以使用以下代码：

element.addEventListener('click', function() {

 // 处理函数代码

});

确保事件类型和处理函数的参数正确，并且处理函数中的代码逻辑正确。

元素被重复添加：如果在appendChild之后多次调用了addEventListener方法，可能会导致事件监听器被重复添加，从而导致事件处理函数被多次触发。在确保元素已经正确添加到DOM树后，只需要调用一次addEventListener方法即可。
元素被替换或移除：如果在appendChild之后，对元素进行了替换或移除操作，可能会导致之前添加的事件监听器失效。在对元素进行操作时，需要注意是否会影响到已经添加的事件监听器。

综上所述，如果在appendChild之后addEventListener不工作，可以检查以上几个方面，确保元素正确添加到DOM树中，并正确绑定了事件监听器。如果问题仍然存在，可能需要进一步检查代码逻辑或提供更多相关的上下文信息以便进行排查。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和业务需求。详细信息请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详细信息请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端对象存储服务。详细信息请参考：https://cloud.tencent.com/product/cos

相关搜索:addEventListener不工作一次以上 addeventlistener不工作，事件不等待单击 addEventListener在javascript中不触发 AJAX文件进度不工作/ addEventListener(' progress ')不工作 Chrome56移动端addEventListener“点击”不工作 Img src在addEventListener之后未定义 ios addEventListener不工作 Javascript SetInterval / addEventListener不工作 Jquery is(":empty)在.remove()之后不工作 Rails 6+ Webpack document.addEventListener不工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在公司制度不规范的情况下，如何做好测试工作？

首先我要说，公司目前制度不规范，对我们来说是个机遇，绝对是个机遇！遇到这个好机会你还在等什么？如果说这个公司已经足够好了，那他还请你过来做什么？你的能力还足以让公司有更高的提升么？...我们的选择要么改变自己要么改变别人，千万不要一方面抱怨公司，另一方面还赖在公司不走，那是最令人鄙视的人生了！二、对于已经做管理层，有机会改变公司现状的，那恭喜你。...如果要，那恭喜，你一定要得到尚方宝剑，特别是对于比较国企话的公司，否则出师无名，人家不拽你。如果上面没这个要抓测试提高质量的目的，你怎么办？跟上面忽悠呗！...问他们对今后的测试有啥意见，他们想怎么搞，然后，好，跟他们交换思路，把你的大致想法讲给他们听，看看他们什么意见，肯定会有很多好意见的，因为人家也想趁着这个机会提高质量少给自己以后的工作找麻烦。...这个过程可能需要经过2轮，因为要将自己修改后的东西在和别人沟通么。

1.1K3 0

在IT行业工作了10年之后，我转行成了一名数据科学家

直到 2013 年，我已经在软件服务行业工作了 9 年。我的工作稳定下来，看不到有太多发展空间。直到我了解到即将到来的新潮流——“数据分析”。最开始进入分析行业时感觉困难重重。...结构化转型的优势从大型机程序员转行进入数据科学行业，我经过了两个阶段——第一个阶段是在为期一年的项目中，另一个是我在日常工作中所面临的挑战。...初次面试工作面试就像第一次约会，结果难以预测。我面临的下一个挑战就是开始找寻数据科学领域的工作机会。招聘经理通常会关注那些在非数据科学领域也有丰富经验的人。...事实上据我所知，在面试中，在数据科学领域勇于竞争，这点要比实际工作经验更重要。 ? 经验教训在转行过程中，我在学术方面所面临的挑战主要来自数学；在工作方面，我面临着来自流程和领域方面的挑战。...如果你是数据分析领域的新手，或者在没有导师的情况下开始学习，那就试着找个导师。自我反思以下是一些打算转行前应该问自己的问题: • 为什么想转行?

9765 0

脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

这种封装工作在提升生产效率的同时也带来了复杂性，甚至有些封装工作的复杂程度远超了业务逻辑本身。...归根结底：在写代码的时候，我们要始终知道自己在做什么。方案基于 Web Component 技术与相关的辅助工具单纯用 Web Component 开发的话，挺麻烦的。.../Index.js"> new EventSource('/esbuild').addEventListener('change', () =...= `http://localhost:${port}/index.html` console.log(devServerAddr) } startDevServer(); 有了这个脚本之后...scss 隔离样式假设我们约定一个组件的根元素有一个父样式，这个父样式约束着这个组件的所有子元素得样式那就可以用下面的代码，让组件的样式作用于组件内，不污染全局样式 //ViewDay.scss

1784 0

HTML5 File API 使用技巧

在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。...("dragenter",drag,false); dropBox.addEventListener("dragover",drag,false); dropBox.addEventListener("...使用 FileReader 上传文件在展示图片预览图部分以及使用过 FileReader API。...默认为 false * loaded 它表示已上传的工作量（数字类型） * total 它表示总的工作量数（数字类型） */...不添加的话，生成的数据是 key=value 形式的数据，而且当有 file input 时，文件内容不会被上传。

2.5K2 0

HTML5 File API

在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。...("dragenter",drag,false); dropBox.addEventListener("dragover",drag,false); dropBox.addEventListener("...使用 FileReader 上传文件在展示图片预览图部分以及使用过 FileReader API。...默认为 false * loaded 它表示已上传的工作量（数字类型） * total 它表示总的工作量数（数字类型） */...不添加的话，生成的数据是 key=value 形式的数据，而且当有 file input 时，文件内容不会被上传。

1.8K1 0

JS 事件绑定、事件监听、事件委托详细介绍转

在JavaScript中，有三种常用的绑定事件的方法：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。...script> var btn3 = document.getElementById("btn3"); btn3.onclick = function(){ alert("hello 1"); //不执行...("click",hello1);//执行了 btn5.addEventListener("click",hello2);//不执行 btn5.removeEventListener("click",hello2...(textnode); list.appendChild(node); 点击item1到item3都有事件响应，但是点击item4时，没有事件响应。...(textnode); list.appendChild(node); 当点击item4时，item4有事件响应。

8.7K3 1

史上最贴心React渲染器开发辅导

我摊牌了，编不下去了，就说好好写文章他不香吗？正儿八经的，我们开始！相信大家对于跨端这个概念不陌生，什么是跨端？...就是让你感觉写一套代码可以做几个人的事，比如，我用 React 可以写Web 、可以写小程序、可以写原生应用，这样能极大降低成本，但其实，你的工作交给 React 去做了，我们可以对应一下： •web...，一下我们修改相关方法，重新让项目跑起来，以助于大家理解渲染器的工作原理。...小小拓展了一下，我们回来，更新来自于 setState 、forceUpdate，更新在经过系列调度之后，最终会提交更新，这个操作就是在 commitUpdate方法完成。...(child); }, appendChild(parent, child) { parent.appendChild(child); }, finalizeInitialChildren

1.1K3 0

实现微前端的十种方式【第二种】

('hashchange', loadApps); window.addEventListener('popstate', loadApps); const originalAddEventListener...= window.addEventListener; const originalRemoveEventListener = window.removeEventListener; window.addEventListener...function registryApp(entry,activeRule) { Apps.push({ entry, activeRule }) } 注册完了之后...} else { return Promise.resolve(item.textContent); } }); subapp.appendChild...const script = document.createElement('script'); script.innerText = item; subapp.appendChild

5732 0

筛选商品案例

tr.innerHTML = '' + value.id + '' + value.pname + '' + value.price + ''; tbody.appendChild...end.value; }); console.log(newDate); }); 将筛选出来的数据重新渲染到表格中将渲染数据的逻辑封装到一个函数中将筛选之后的数据重新渲染...search_price.addEventListener('click', function() { var newDate = data.filter(function(value...value.price >= start.value && value.price <= end.value; }); console.log(newDate); // 把筛选完之后的对象渲染到页面中...= '' + value.id + '' + value.pname + '' + value.price + ''; tbody.appendChild

9491 0

「Web编程API」- 03

DOM 事件流会经历3个阶段：捕获阶段当前目标阶段冒泡阶段我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡...，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。...事件委托也称为事件代理，在 jQuery 里面称为事件委派。说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。...document.addEventListener('click', function(e) { // 1. client 鼠标在可视区的x和y坐标 console.log

1.4K5 0

《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

将JavaScript关闭来测试页面仍然可以执行其正常功能，所有的链接（不包含href = "#" 的实例）是否能够正常工作，所有的表单可以正常工作并正确提交信息。...当需要创建一个相对比较大的子树，应该在子树完全创建之后再将子树添加到DOM树中。这时可以采用文档碎片（document fragment）技术来容纳所有节点。　　...JavaScript库可以减少为了支持IE（在IE9.0之前的版本）和符合W3C规范的实现所做的双重工作。　　...但更清晰的方法是使用addEventListener()方法。在IE8.0之前的版本中没有该方法，在这些老版本浏览器中应该使用attachEvent()。　　...第二部分是处理升级标签的实际工作。接下来第三部分是取消事件的传播。在当前特定的范例中，这一部分可以省略，不是必须的。但是通常如果不这样做，会导致事件传播到根文档，甚至是传播到window对象中。

8352 0

《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

将JavaScript关闭来测试页面仍然可以执行其正常功能，所有的链接（不包含href = “#” 的实例）是否能够正常工作，所有的表单可以正常工作并正确提交信息。...当需要创建一个相对比较大的子树，应该在子树完全创建之后再将子树添加到DOM树中。这时可以采用文档碎片（document fragment）技术来容纳所有节点。　　...JavaScript库可以减少为了支持IE（在IE9.0之前的版本）和符合W3C规范的实现所做的双重工作。　　...但更清晰的方法是使用addEventListener()方法。在IE8.0之前的版本中没有该方法，在这些老版本浏览器中应该使用attachEvent()。　　...第二部分是处理升级标签的实际工作。接下来第三部分是取消事件的传播。在当前特定的范例中，这一部分可以省略，不是必须的。但是通常如果不这样做，会导致事件传播到根文档，甚至是传播到window对象中。

8923 0

JS常用设计模式解析01-单例模式

function () { this.style.display = 'none'; }); document.body.appendChild...改进办法2：在页面初始化时建立一个隐藏的遮罩，每次点击只是控制其display属性。 <!...function () { this.style.display = 'none'; }); document.body.appendChild...然而，设想这样一个场景，你在不同的页面，需要使用不同背景颜色的mask。怎么办？一个简单的想法，就是像createMask里面传参。...this.instance = null; }; Singleton.prototype.getName = function(){ return this.name; } /* * * 1.这里的this在非严格模式下指向全局变量

6672 1

前端成神之路-WebAPIs03

事件流会经历3个阶段：捕获阶段当前目标阶段冒泡阶段我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡...，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。 ?...事件委托也称为事件代理，在 jQuery 里面称为事件委派。说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。生活中的代理： ?...1.4.3 获取鼠标在页面的坐标 // 鼠标事件对象 MouseEvent document.addEventListener('click',

2.9K2 0

前端：Canvas进行简单图片压缩算法

function convertImageToBase64(file, callback) { // 创建一个FileReader对象，它允许Web应用程序异步读取存储在计算机上的文件...（也就是readAsDataURL读取完毕后触发） reader.addEventListener("load", function (e) {...canvas.setAttribute("id", "_compress_") // visibility hidden 需要创建的canvas隐藏而不是不渲染...DOM canvas.style.visibility = 'hidden' document.body.appendChild(canvas.../ 防止重新上传覆盖 ctx.clearRect(0, 0, maxW, maxH) // canvas.drawImage() 方法在画布

1.6K1 0

前端性能优化小结

Promise / Web Worker、Time Slicing（延迟执行，队列任务，线程阻塞） DOM操作一般来说dom操作对页面卡顿影响虽不是最大但肯定是最常见的，习惯使用 jquery 的小伙伴肯定不陌生...(document.createTextNode("Option " + i); fragment.appendChild(item); } list.appendChild(fragment)...; 大范围操作先把容器隐藏，在其中操作完成后，再显示这是一个我刚接触前端时遇到的一个优化办法，当时很不理解为什么 display=none 之后操作就算是性能优化了。...t = t.parentNode; } } } } // 闭包节流器 // 使用被节流的匿名函数作为回调函数 // window.addEventListener...const scrollFunc= closure_throttle((e)=>{ console.log(e); }, 1200); // 使用被节流的指定函数作为回调函数 window.addEventListener

1151 0

markdownpad2:输出Html时自动生成目录TOC

但是发现它没有TOC输出功能，有些不方便，网上找到不少文章，找到下面这篇文章，这篇文章中的脚本实现了markdownpad输出html时自动加上目录的功能,javascript脚本写得也简优雅，但美中不足就是没有在目录中加上标题编号...《为MarkdownPad2的HTML输出也增加目录》参考这篇文章的代码，自己做了些简化修改，在输出目录的同时为标题加上标号，满足我的使用： document.addEventListener("DOMContentLoaded", function() { // 生成目录列表 var toc = document.createElement...生成标题ID var id = "title" + index; header.setAttribute("id", id); // 为标题加上标号,如果不希望显示标号...如果希望h1作为主标题，不列入目录，则上面的代码要做一点改动 document.addEventListener("DOMContentLoaded

1.7K2 0

Js框架设计之DomReady

2、HTML是要通过浏览器解析之后才会转换成为DOM节点一般地,但我们向浏览器中输入一个地址,开始加载页面到我们看到页面的内容为止,这期间就有一个DOM节点构建的过程(浏览器将HTML标签转换为DOM...IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。...事件句柄在冒泡阶段执行 document.addEventListener("DOMContentLoaded", function () { document.removeEventListener...下,使Dom.domReady先于window.onload执行 //1、在老版本IE中onreadystatechange事件会触发在window.onload之后 /.../2、当页面包含图片时，onreadystatechange事件会触发在window.onload之后(换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时) document.attachEvent

1.5K6 0

JavaScript性能优化怎么实现？12种优化方式你知道嘛

// 不推荐写法（频繁操作DOM） const container = document.getElementById('container'); for (let i = 0; i < 1000; i...(element); } container.appendChild(fragment); 避免不必要的重绘和回流：重绘和回流会消耗大量的计算资源。...尽量避免在循环中修改样式属性或获取布局信息。如果需要对多个样式进行修改，可以使用CSS的class切换。...// 不推荐写法（频繁触发重绘和回流） const element = document.getElementById('myElement'); for (let i = 0; i < 1000; i...// 不推荐写法（为每个子元素添加事件监听器） const items = document.querySelectorAll('.item'); items.forEach((item) => {

2811 0

impress.js 源码分析

我试图去抽取常用的公共方法，尝试做成框架组件的形式，发现工作量巨大，而且以自己目前水平，写出来的代码通用性很差。...impress.js简单来说仅仅是实现了幻灯片的转场特效的框架，虽说将单页限制在框架之内，但所有单页还是需要自己用代码设计。...在init()函数的结尾触发impress:init事件，这样绑定上去的函数就会全部触发。...("click", function ( event ) {...} window.addEventListener("resize", throttle(function () {...} document.addEventListener...很多技术单独实现都很简单，综合运用起来，如何保证命名空间不污染，代码的重用复用，js和css代码的兼容性等细节都是值得学习的地方。

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭