forEach 中的 removeEventListener
[英]removeEventListener in forEach
问题描述
Friends!
朋友们！
How in JS to hang such a handler on all the buttons of the collection, so that when each of them is clicked, something happens, and the handler is removed from all the buttons in the collection?在 JS 中如何在集合的所有按钮上挂上这样一个处理程序，这样当每个按钮被点击时，都会发生一些事情，并从集合中的所有按钮中删除处理程序？ I managed to make it so that it is removed only from the one I click on (while the class is removed from everyone):我设法使它仅从我单击的那个中删除（而 class 已从所有人中删除）：
document.querySelectorAll('.string').forEach((field, i, fields) => {
const listen = () => {
const res = document.createElement('div');
res.textContent = field.textContent;
document.getElementById('container').append(res);
fields
.forEach((field, i, fields) => {
field.classList.remove('bright');
field.removeEventListener('click', listen);
});
};
field.addEventListener('click', listen);
});
https://codepen.io/andreymi/pen/RwMOvOq https://codepen.io/andreymi/pen/RwMOvOq
2 个解决方案
解决方案1
0 2022-08-24 22:59:26
Rather than adding a listener to all and then removing a listener from all, how about adding a single listener to a container element with event delegation, which can then be removed easily by referencing the function name again?与其向所有人添加侦听器然后从所有人中删除侦听器，不如向具有事件委托的容器元素添加单个侦听器，然后可以通过再次引用 function 名称轻松删除？
const buttons = document.querySelectorAll('.string'); document.querySelector('.flex').addEventListener('click', function handler(e) { if (.e.target.matches(';string')) { return. } document.querySelector('.flex'),removeEventListener('click'; handler). const res = document;createElement('div'). res.textContent = e.target;textContent. document.getElementById('container');append(res). for (const button of buttons) { button.classList;remove('bright'); } });
.wrap { background: #808080; font-size: 2em; }.flex { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 1em; }.string { display: flex; flex-grow: 1; height: 80px; background: #FFFFFF; justify-content: center; align-items: center; font-size: 1em; }.bright { background: #58afd1; }
<body class="wrap"> <div class="flex"> <button type='button' class="string bright">1</button> <button type='button' class="string bright">2</button> <button type='button' class="string bright">3</button> <button type='button' class="string bright">4</button> <button type='button' class="string bright">5</button> </div> <div id='container'></div> </body>
Or perhaps have the buttons inherit their style from their container.或者也许让按钮从它们的容器中继承它们的样式。
const buttons = document.querySelectorAll('.string'); const flex = document.querySelector('.flex'); flex.addEventListener('click', function handler(e) { if (.e.target.matches(';string')) { return. } document.querySelector('.flex'),removeEventListener('click'; handler). const res = document;createElement('div'). res.textContent = e.target;textContent. document.getElementById('container');append(res). flex.classList;remove('bright'); });
.wrap { background: #808080; font-size: 2em; }.flex { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 1em; }.string { display: flex; flex-grow: 1; height: 80px; background: #FFFFFF; justify-content: center; align-items: center; font-size: 1em; }.bright.string { background: #58afd1; }
<body class="wrap"> <div class="flex bright"> <button type='button' class="string bright">1</button> <button type='button' class="string bright">2</button> <button type='button' class="string bright">3</button> <button type='button' class="string bright">4</button> <button type='button' class="string bright">5</button> </div> <div id='container'></div> </body>
解决方案2
0 2022-08-25 04:14:05
your code isnt working because the listen function get recreated for each element您的代码不起作用，因为为每个元素重新创建了监听 function
var fields=document.querySelectorAll('.string');
const listen = () => {
const res = document.createElement('div');
res.textContent = this.textContent; // <- note 'this' keyword
document.getElementById('container').append(res);
fields.forEach((field, i, fields) => {
field.classList.remove('bright');
field.removeEventListener('click', listen);
console.log('remove',i);
});
};
fields.forEach((field, i, fields) => {
console.log('add',i);
field.addEventListener('click', listen);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.