{"id":56222,"date":"2022-06-24T03:01:56","date_gmt":"2022-06-23T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56222"},"modified":"2022-06-24T22:08:54","modified_gmt":"2022-06-24T12:08:54","slug":"multiple-addeventlistener-logics-for-html-elements-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/multiple-addeventlistener-logics-for-html-elements-primer-tutorial\/","title":{"rendered":"Multiple addEventListener Logics for HTML Elements Primer Tutorial"},"content":{"rendered":"
\"Multiple<\/a>

Multiple addEventListener Logics for HTML Elements Primer Tutorial<\/p><\/div>\n

The dynamic creation of event logic associated with webpage HTML elements is a powerful tool for making your webpages dynamic.<\/p>\n

In the case of the great [element].<\/font>addEventListener<\/a> means by which you can make this happen, there is a great feature that goes …<\/p>\n

\nIf you can swing it that the second “function” parameter to [element].<\/font>addEventListener is unique and just a straight simple function object reference you can pile on multiple same-type event logics onto the one HTML element\n<\/p><\/blockquote>\n

We wanted to combine that premise with a dynamic user entered “data item” into that mix, in our “proof of concept” ael_multi.html<\/a>‘s cell multiple background colour controller<\/a> web application for you, today. This means creating a discrete “not existing beforehand” Javascript function on the fly. Yes, we can do that<\/font> via …<\/p>\n


\n var thirty=1;
\n var bcols=['#ffffff'];
\n var icols=[''];
\n
\n function moreevs() {
\n var tag=null;
\n for (var i=2; i<=30; i++) {\n tag = document.createElement('script');
\n tag.type='text\/javascript';
\n tag.innerHTML=' function ev' + i + '() { document.getElementById(icols[' + i + ']).style.backgroundColor=bcols[' + i + ']; setTimeout(ev' + i + ', 3000); } ';
\n document.head.appendChild(tag);<\/font>
\n }
\n thirty=30;
\n }
\n
\n function ev1() {
\n document.getElementById(icols[1]).style.backgroundColor=bcols[1];
\n setTimeout(ev1, 3000);
\n }
\n<\/code><\/p>\n

… but how do we get the proper [element].<\/font>addEventListener<\/a> call into the mix? This was a “first time” usage for us as per the eval<\/a> inspired<\/font> …<\/p>\n


\n var fnum=0;
\n
\n function ael_more(iois) {
\n var tag=null;
\n var eok=true;
\n fnum++;
\n if (fnum > thirty) {
\n tag = document.createElement('script');
\n tag.type='text\/javascript';
\n tag.innerHTML=' function ev' + fnum + '() { document.getElementById(icols[' + fnum + ']).style.backgroundColor=bcols[' + fnum + ']; setTimeout(ev' + fnum + ', 3000); } ';
\n document.head.appendChild(tag);
\n thirty=fnum;
\n eok=false;
\n }
\n bcols.push(iois.value);
\n icols.push(iois.id.replace('i','td'));
\n if (eok) {
\n document.getElementById(iois.id.replace('i','td')).addEventListener(\"click\", eval(\"ev\" + fnum + '()'));<\/font>
\n } else {
\n document.getElementById(iois.id.replace('i','td')).addEventListener(\"click\", window[\"ev\" + fnum + '']);
\n }
\n document.getElementById(iois.id.replace('i','td')).click();
\n }
\n<\/code><\/p>\n

… you can see in (perhaps animated)<\/font> action below, where the user chooses background colours from the colour picker elements shown …<\/p>\n