Working on my card game project I noticed at some point that I needed to append values I want to use inside an addEventListener’s function, to the tag that becomes available inside the function as event.currentTarget… but that in seemingly exactly similar coding situations, just calling variables declared outside the Event Handler’s function works.
Here is some code where calling a variable declared outside works :
document.querySelectorAll('.HexKeyControl').forEach(function (Tag) {
Tag.IdSplitAtUnderScore = Tag.id.split('_');
Tag.addEventListener('mousedown',function() {
PlayNote(Tag.IdSplitAtUnderScore[1],Tag.IdSplitAtUnderScore[2]);
SlideModeOn = true;
});
Tag.addEventListener('mouseup',function() {
SlideModeOn = false;
});
Tag.addEventListener('mouseenter',function() {
if (SlideModeOn) {
PlayNote(Tag.IdSplitAtUnderScore[1],Tag.IdSplitAtUnderScore[2]);
}
});
Tag.addEventListener('mouseleave',function() {
EvidenceOut(document.getElementById('HexKeyImage_'+Tag.IdSplitAtUnderScore[1]+'_'+Tag.IdSplitAtUnderScore[2]));
});
}); Maybe because the addEventListeners are themselves part of the forEach’s function, and the Tag variable was declared into this function, the addEventListener’s functions become child functions of the forEach’s function and for some quirky design reason it results into the variable being available… Maybe because Tag contains a DOM Element’s reference instead of a common value, it is treated differently becaue of its type…
Here is some code where I had to use event.currentTarget :
function display_board_card(spot,player,figure,instant_only=false) {
// Variables preparation
[...some out-of-context code...]
/* Here comse the 1st case, in which the event handler's code is put into a variable
for later use with eval() (which is bad I know but I don't remotely care, all cases of eval being
replacable with other code are dumb situations that never happened to me).
That said I understand that eval may steal the scope and force me to use event.currentTarget
(and don't worry, the drop_target variable IS appended to the currentTarget before the eval(onClick) is
called) */
var onClick = "if (targeting_a_credo){
evaluate_credo_target(drag_memory,evt.currentTarget.drop_target);
}";
[...lots of out-of-context code...]
// Event handlers
// Here is the 2nd case in which I had to append the value to the DOM element
card_bg_div.drop_target = player+'***'+figure;
card_bg_div.addEventListener('drop',function (evt) {
check_drop(event,evt.currentTarget.drop_target);
});
card_bg_div.addEventListener('dragover',function () {
allowDrop(event);
});In the 2nd case, we’re still inside a main function which has for parameters player and figure, which for some reason are made unavailable inside addEventListeners functions, which as you will admit, are located inside the parent function, just like in the first snipet, but won’t trail the parent function’s parameters inside their own function…
JavaScript is a total mess compared to PHP… I could ramble for long on this.