/    Sign up×
Community /Pin to ProfileBookmark

addEventlistener question

Copy linkTweet thisAlerts:
Jan 29.2023

This code below works. But it is better to listen to the `document.body` instead and trap each id?
Which one consumes less power and is the fastest? Does the number or scope of listener any impact of performance, power or memory consumption?

“`
document.getElementById(“new”).addEventListener(“click”, newrec);
document.getElementById(“edit”).addEventListener(“click”, editrec);
document.getElementById(“find”).addEventListener(“click”, findrec);

function newrec() {
document.getElementById(“desk_header”).innerHTML = “New Record”
}

function editrec() {
document.getElementById(“desk_header”).innerHTML = “Edit Record”
}

function findrec() {
document.getElementById(“desk_header”).innerHTML = “Find Records”
}
“`

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadJan 29.2023 — Hi there sibert,

here is a possible alternative...

[b]HTML[/b]
<i>
</i>&lt;button&gt;New&lt;/button&gt;
&lt;button&gt;Find&lt;/button&gt;
&lt;button&gt;Edit&lt;/button&gt;

&lt;p id="desk_header"&gt;&lt;/p&gt;



[b]JavaScript[/b]
<i>
</i>(function( d ) {
'use strict';
var arry = ['New Record','Find Record','Edit Records'],
bttn = d.querySelectorAll('button');
bttn.forEach(
function( element,index ) {
element.addEventListener('click',
function(){
d.querySelector('#desk_header').textContent = arry[index];
}
)
}
);

}( document ));


[b]Full Page View[/b]

https://codepen.io/coothead/full/VwBBpKY

[i]coothead[/i]
Copy linkTweet thisAlerts:
@sibertauthorJan 29.2023 — > @coothead#1650297 here is a possible alternative...

Thank you! Interesting approach.

I forgot to mention that there are lots of other stuff that should happen. Like fetch a html page and put into innerHTML and some check for responsiveness (different thing should happen at different width)

So my question is still if ONE listener is better than MANY listeners?
Copy linkTweet thisAlerts:
@cootheadJan 29.2023 — > @sibert#1650298

> So my question is still is ONE listener is better than MANY listeners?

If you have [b]three items[/b] requiring [b]onclick[/b] activity then [b]each[/b] one

will require an "[i]addEventLListener[/i]". [img]https://coothead.co.uk/images/smilies/sunshine.gif[/img]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@sibertauthorJan 29.2023 — > @coothead#1650302 If you have three items requiring onclick activity then each one

> will require an "addEventLListener".

Yes, but a cop in each street corner or a central cop monitoring the whole city?

ChatGPT gave me this answer:

> It depends on the specific use case. One event listener serving multiple functions can be more efficient and simplify code, but it may also make it more difficult to debug and maintain. Having many separate listeners can make the code more organized and easier to understand, but it may also lead to more overhead. Ultimately, the decision should be based on the specific requirements of the project and the trade-offs that are most acceptable.

Not a super clear answer, but it seems that a centralized cop is better and more efficient. But harder to read.
Copy linkTweet thisAlerts:
@SempervivumJan 29.2023 — A major benefit of using a central event listener for document or window is that it will work reliably when elements are added dynamically, e. g. in the callback of an ajax request. No further measures necessary.

Additionally, but that's just a personal preference of mine, it makes looping through, e. g. a nodelist, obsolete when listening to an event on all members is required.
Copy linkTweet thisAlerts:
@cootheadJan 29.2023 — > @sibert#1650303

> Not a super clear answer....

Well, it certainly got me very confused. [img]https://coothead.co.uk/images/smilies/groan2.gif[/img]

I did make a slight modification to my script though...
<i>
</i>(function( d ) {
'use strict';
var txt,
arry = ['New Record','Find Record','Edit Records'],
bttn = d.querySelectorAll('button'),
hedr = d.querySelector('#desk_header');

<i> </i> bttn.forEach(
<i> </i> function( element,index ) {
<i> </i> element.addEventListener('click',
function(){
if( hedr.firstChild === txt ){
hedr.removeChild( txt );
}
txt = d.createTextNode( arry[index] );
hedr.appendChild( txt );
}
)
}
);
}( document ));

...which, I believe, makes it a little more robust.

[b]Full Page View[/b]

https://codepen.io/coothead/full/VwBBpKY

[i]coothead[/i]
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...