具有多个参数的JavaScript addEventListener问题

Question

This is the prompt: In the event listener DOMContentLoaded set up two addEventListener methods for each of the second input elements (using the array of inputElements[] and the corresponding index) and passing the first and the second value (use inputElements[].value ) and the appropriate span element (using spanElements[] ). Since you need to pass arguments, use the following construct:

inputElements[index].addEventListener('blur',function(){ fCompareInput(arguments); })

This is the Function: function fCompareinput(value1,value2,display)

This is what I have:

inputElements[2].addEventListener('blur', function() {
    fCompareInput(inputElements[2].value);
});
inputElements[2].addEventListener('blur', function() {
    fCompareInput(spanElements[2].value);
});

inputElements[4].addEventListener('blur', function() {
    fCompareinput(inputElements[4].value);
});
inputElements[4].addEventListener('blur', function() {
    fCompareinput(spanElements[4].value);
});

I don't think I'm passing the arguments correctly.

Answer 1

It's simply easier to go through your inputElements collection using a loop, and then bind the event listener. Also:

1. You can place multiple function calls in the blur callback
2. Use this in the callback to refer to the DOM node that has triggered the event

Let's say you only want the element with the index of 2 and 4 to have such events bound, then we can do this:

// Define which indexes you want to bind eventistener to
var indexes = [2,4];

// Loop through the entire collection
for (let i = 0; i < inputElements.length; i++) {
    if (indexes.indexOf(i) !== -1) {
        inputElements[i].addEventListener('blur', function() {
            fCompareinput(this.value);
            fCompareinput(spanElements[i].value);
        });
    }
}

Supplementary:

• If you want to retrieve all even numbered element (by index) in the collection, use:

   if (i % 2 === 0) 

• If you want to retrieve all even numbered elements and excluding the first element, use:

   if (i % 2 === 0 && i !== 0) 

For example:

// Loop through the entire collection
for (let i = 0; i < inputElements.length; i++) {
    if (i % 2 === 0) {
        inputElements[i].addEventListener('blur', function() {
            fCompareinput(this.value);
            fCompareinput(spanElements[i].value);
        });
    }
}

---

Since you have tagged your question with jQuery , there is also a jQuery-based solution: much simpler, but of course incurs an overhead of having to load a library.

var indexes = [2,4];

$(inputElements).each(function(i) {
    if (indexes.indexOf(i) !== -1) {
        $(this).on('blur', function() {
            fCompareinput(this.value);
            fCompareinput($(spanElements).get(i).val());
        });
    }
});

...or, if you want to select even numbered indexes only:

$(inputElements).each(function(i) {
    if (i % 2 === 0) {
        $(this).on('blur', function() {
            fCompareinput(this.value);
            fCompareinput($(spanElements).get(i).val());
        });
    }
});