As I strive to develop a function that can capture multiple elements on the page, iterate through them, and apply a mousedown event listener while passing data in a variable to another function that changes with each iteration, I hit a roadblock. I want to ensure that when the event is triggered, the variable holds the correct value from that specific iteration rather than the last one.
Despite scouring various answers across different platforms, I find myself unable to make this work successfully. Regardless of trying numerous supposedly correct solutions, I keep getting stuck with the final value from the data at hand.
Here are several variations I've experimented with - These variants display the anticipated value upon attachment but output an incorrect value when activated. I would greatly appreciate any insight into what could be going wrong here. Thank you!
Terminology Used:
_externalFunction() - The external function intended for invocation upon triggering the event, accompanied by the data object.
changingDataValue - The initial data value destined for transfer to the external function.
Utilizing Closure within a Separate Function
function addMouseDown(elem, data) {
elem.addEventListener("mousedown", function () {
_externalFunction(data);
console.log("triggered - mouseDown: " + data.value);
}, false);
console.log("attached - mouseDown: " + data.value);
}
addMouseDown(elements[i], changingDataValue);
Incorporating Closure within Another Function Alongside a Closure in the Event Listener
function addMouseDown(elem, data) {
(function(d) {
elem.addEventListener("mousedown", function () {
(function (e) {
_externalFunction(e);
console.log("triggered - mouseDown: " + e.value);
})(d);
}, false);
})(data);
console.log("attached - mouseDown: " + data.value);
}
addMouseDown(elements[i], changingDataValue);
Implementing Closure within Another Function:
function addMouseDown(elem, data) {
(function(d) {
elem.addEventListener("mousedown", function () {
_externalFunction(d);
console.log("triggered - mouseDown: " + d.value);
}, false);
})(data);
console.log("attached - mouseDown: " + data.value);
}
addMouseDown(elements[i], changingDataValue);
Closure Embedded within the Script Itself
(function (data) {
elements[i].addEventListener("mousedown", function () {
_externalFunction(data);
console.log("triggered - mouseDown: " + data.value);
}, false);
console.log("attached - mouseDown: " + data.value);
})(changingDataValue);
Closure within the Event Handler
elements[i].addEventListener('mousedown', (function(data) {
return function() {
_externalFunction(data);
console.log("triggered - mouseDown: " + data.value);
};
})(changingDataValue), false);
console.log("attached - mouseDown: " + changingDataValue.value);
Performs flawlessly except for prematurely calling the external function before the event actually triggers, yet it does pass the desired value
(function (elem, data) {
elem.addEventListener("mousedown", (function (d) {
_externalFunction(d);
console.log("triggered - mouseDown: " + d.value);
})(data), false);
console.log("attached - mouseDown: " + data.value);
})(elements[i], changingDataValue);
Once again, any assistance offered here will be highly valued. Thanks!