javascript - 尝试修复一些 DRY 事件监听器

标签 javascript html

当我编写事件监听器以将文本字段更改为输入字段的值时,我遇到的最大问题是,如果每个字段没有单独的事件监听器,我不知道如何做到这一点,而且它看起来非常难看。 val 变量或任何变体是文本字段,aVcV 或单字母变量是输入字段。

aV.addEventListener("keydown", function(ev){
    if(ev.keyCode == 13){
        avaL.textContent = aV.value;
    };
});

cV.addEventListener("keydown", function(ev){
    if(ev.keyCode == 13){
        cvaL.textContent = cV.value;
    };
});

a.addEventListener("keydown", function(ev){
    if(ev.keyCode == 13){
        aVal.textContent = a.value;
    };
});

b.addEventListener("keydown", function(ev){
    if(ev.keyCode == 13){
        bVal.textContent = b.value;
    };
});

c.addEventListener("keydown", function(ev){
    if(ev.keyCode == 13){
        cVal.textContent = c.value;
    };
});

最佳答案

使用forEach:

var elems = [aV, cV, a, b, c];
var boxes = [avaL, cvaL, aVal, bVal, cVal];
elems.forEach((elem, idx) => {
    elem.addEventListener("keydown", function(ev) { 
        if (ev.keyCode == 13) {
            boxes[idx].textContent = elem.value;
        }
    });
});

关于javascript - 尝试修复一些 DRY 事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55291043/

相关文章:

javascript - 我需要在 DOM 事件回调中使用闭包吗?

html - 将 Facebook Like 按钮添加到粉丝页面

javascript - jquery 日期选择器,但日期月份和年份在单独的下拉列表中

javascript - 如何制作一个 selectAll 复选框并触发 ng-click 每个复选框的每个功能?

javascript - 动画圆描边 SVG - 不是一个完整的圆

javascript - Bootstrap 在调整大小时动态添加

jquery - CSS div 换行和垂直空格

javascript - 将 django-select2 用于带有图片的下拉列表

c# - 为什么不能 <input type ="hidden"> 从服务器端接受 bool 值?

javascript - 手持式远程答题器会在浏览器中触发哪些事件?