Question

我在将jQuery转换为Vanilla JS时出现问题，这是我在jQuery中的代码：

$("[target]").change(function () {
    var attr = $(this).attr("target");
    this.obj[attr] = this.value
});

我决定把它翻译成Vanilla JS，以获得bettor表演（我也稍微改进了一下），然后我就来了：

var addEventListener = (function() {
    if(document.addEventListener) {
        return function(element, event, handler) {
             element.addEventListener(event, handler, false);
         };
    }
    else {
        return function(element, event, handler) {
             element.attachEvent('on' + event, handler);
        };
    }
}());
var elements = document.querySelectorAll("[target]");
var obj = this.obj;
for (var i = 0; i < elements.length; i++) {
    var attr = elements[i].getAttribute("target");
    addEventListener(elements[i], "change", function () {
        obj[attr] = this.value;
    });
    addEventListener(elements[i], "keydown", function () {
        obj[attr] = this.value;
    });
    addEventListener(elements[i], "input", function () {
        obj[attr] = this.value;
    });
    addEventListener(elements[i], "paste", function () {
        obj[attr] = this.value;
    });
}

问题在于它是有效的，但是对于只有1个元素，如果有2个或更多元素具有属性＆＃34; target＆＃34;，那么它就不能正常工作。有什么想法解决这个问题吗？

Answer 1

以下一些代码可能以某种其他方式“不干净”或“不正确”，但这就是我通常处理节点列表遍历的方式：

[].forEach.call(document.querySelectorAll('[target]'), function(x, i, a) {
    addEventListener(a[i], 'eventType', function() {
        //whatever
    });
});

我个人会给addEventListener函数指定一个不同的名称，以区别于内置函数。

P.S。这可能会帮助您进一步： JavaScript closure inside loops – simple practical example

P.P.S。我不认为使用Vanilla JS而不是jQuery提供了一个显着的优势，但这也是一个意见。

从jQuery到Vanilla JS的转换有困难，当有多个元素时，它们不起作用

1 个答案: