EDIT 1
This question was closed almost immediately, since it's supposed to be a duplicate. I beg to differ since the "original" question is about general argument binding, where this question (correctly) resolves a new issue via @Phil's comment. I believe that .bind prepending arguments before the hidden argument event on which you may then call event.preventDefault() is not common knowledge for all. For other's sake, I believe this question will stay open.
EDIT 2
Another knowledge bomb (no sarcasm) from @Phil. In original question it is shown, that instead of .addEventListener('event', callable.bind(this, data)) a possibly clearer way would be .addEventListener('event', e => callable(e, data)) meaning using an intermediate anonymous function that you may put arguments into. A bonus here is that any data fetched (e.g. from a form) is fetched at the time of triggering event, which is clearly advantageous.
ORIGINAL QUESTION
I likely didn't do the title rightly, so please comment a more appropriate one for me to edit.
Best explaining with an example.
This works:
<script>
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = {
name: form.name.value,
};
fetch('logics-url.php', {
...,
body: JSON.stringify(data),
})
.then(r => r.json())
.then(d => console.log(d))
.catch(e => console.error(e));
});
</script>
Then I need the same logic-url.php called with different (additional) data when a button outside of the form is clicked.
First I extracted the callable from inside of the addEventListener and this still works:
<script>
const callable = (e) => {
e.preventDefault();
const data = {
name: form.name.value,
};
fetch('logics-url.php', {
...,
body: JSON.stringify(data),
})
.then(r => r.json())
.then(d => console.log(d))
.catch(e => console.error(e));
}
form.addEventListener('submit', callable);
button.addEventListener('click', callable); // button *is* defined in this scope
</script>
Now I want to send different data these two addEventListeners and this where it fails me.
<script>
const callable = (e, data) => {
e.preventDefault();
// Removed data here
fetch('logics-url.php', {
...,
body: JSON.stringify(data),
})
.then(r => r.json())
.then(d => console.log(d))
.catch(e => console.error(e));
}
const data1 = {
name: form.name.value,
};
form.addEventListener('submit', callable.bind(null, data1));
const data2 = {
name: form.name.value,
trigger: 1,
};
button.addEventListener('click', callable.bind(this, data2));
</script>
I foolishly tried binding e, when it does not exist yet, so I removed it. Then (as you can see) I tried binding null and this and they both resulted in error:
# console
Uncaught ReferenceError: e is not defined at callable
I tried different variations but most resulted in the above error.
I also tried passing just dataN as a lone parameter and it resulted in:
# console
POST {...}/logics-url.php 400 (Bad Request)
Error: SyntaxError: Unexpected token < in JSON at position 0
Do I have to duplicate my code or is there another way?
