Please explain this JS concept

JavaScript
1

The above page states:
“Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You’d have to add 100 attributes to the file; it would quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:”

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('click', bgChange);
}

My own question is, why would someone make all buttons on a page perform the same action (change the background color, in this example)? What is the point of this statement?

2

Don’t forget the button elements can have id, classnames and other attributes. Here I have set a dataset attribute for each button.

<div id='buttonsContainer'>
    <button data-bg-color='blue'>Button 01</button>
    <button data-bg-color='red'>Button 02</button>
    <button data-bg-color='green'>Button 03</button>
</div>

We can then setup the event listeners as described.

const buttons = document.querySelectorAll('#buttonsContainer button');

for (const button of buttons) {
  button.addEventListener('click', bgChange);
}

You could then have a handler that reads the dataset attribute of the button clicked on and sets an elements background colour to the value.

const bgChange = function(event) {
    const currButton = event.target // the button clicked
    const container = document.getElementById('buttonsContainer')

    //  set the container's background colour to that dataset value
    //  note with datasets the name is changed from hyphenated to camel case.
    container.style.backgroundColor = currButton.dataset.bgColor
}

So that is one example that comes to mind.

A better alternative to this is to use Event Delegation. Here is a link that might be of interest.

3 Likes
3

Wow, this opens up a whole world!

1 Like
4

Regarding the last example of the article

<button data-toggle-id="subscribe-mail">

why is data-tgoole-id translated to?

let id = event.target.dataset.toggleId;

and not used as

let id = event.target.dataset.toggle-id;

or even

let id = event.target.dataset.toggle.id;

what in eye would make much more sense?

5

Because that’s how it was designed to behave? Going from dashed to camel case.

There was a lot of argument about what should be done there, but they finally settled on a standard set of conventions, which are summaried at dataset - name conversion

1 Like
6

I know but that makes it not more logical. To be consequent it has been event.target.datasetToggleId then instead of dataset.toggleId. I even see not advantage in having the dash as a camelCase replacement. why not use dataset-toggleId directly?

But I am only a dump old programmer and this was done by high tech modern Software designers…

8

Did you never have a mother who replied “Because I said so”?

9

What you are asking for cannot occur due to how the hyphen works.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.