How to replace inline event handlers (onmousedown, onmouseover, onmouseout,...) containing parameters to comply with CSP rules?

Question

I have been trying all day & searched everywhere for a solution. It hasn't been really successful, and honestly after years browsing stackoverflow that's the first time I post looking for help. :-)

I recently implemented a strict CSP. I forked JSONscriptRequest class of Jason Levitt to secure more the dynamic tag (http://www.geonames.org/export/jsr_class.js) with nonce. I appreciate using this because I really customized and used it a lot (a lot of modules depends on it).

Originally, the script was outputing this in HTML :

<div class="suggestions" id="pcId0" onmousedown="suggestBoxMouseDown(0)" onmouseover="suggestBoxMouseOver(0)" onmouseout="suggestBoxMouseOut(0)">...</div>
<div class="suggestions" id="pcId1" onmousedown="suggestBoxMouseDown(1)" onmouseover="suggestBoxMouseOver(1)" onmouseout="suggestBoxMouseOut(1)">...</div>(and so on, depending on the number of results.)
...

They all have the same class (suggestions). I know i can do this to replace the inline event handlers, but without any parameters :

document.getElementById("placeInput").addEventListener("input", postalCodeLookup)

I tried doing this

document.getElementById("placeInput").addEventListener("change", function() {

var suggestions = document.getElementsByClassName('suggestions');  

console.log(suggestions);

for (i = 0; i < suggestions.length; i++) {
suggestions[i].addEventListener("mousedown", suggestBoxMouseDown([i]));
suggestions[i].addEventListener("mouseover", suggestBoxMouseOver([i]));
suggestions[i].addEventListener("mouseout", suggestBoxMouseOut([i]));
}

});`

Annnd it has been a complete failure again.

I don't know how to pass variable to my functions as easily that we could before.

Concerned functions :

// remove highlight on mouse out event
function suggestBoxMouseOut(obj) {
    document.getElementById('pcId'+ obj).className = 'suggestions';
} 
// the user has selected a place name from the suggest box  
function suggestBoxMouseDown(obj) {
    closeSuggestBox();
    var postalcodeInput = document.getElementById("postalcodeInput");
    var placeInput = document.getElementById("placeInput");
    var latitude = document.getElementById("latitude");
    var longitude = document.getElementById("longitude");
    postalcodeInput.value = postalCodes[obj].postalCode;
    placeInput.value = postalCodes[obj].placeName + " (" + postalCodes[obj].postalCode + ", " + postalCodes[obj].countryCode + ")";
    latitude.value = postalCodes[obj].lat;
    longitude.value = postalCodes[obj].lng;  
}
// function to highlight places on mouse over event
function suggestBoxMouseOver(obj) {
    document.getElementById('pcId'+ obj).className = 'suggestionMouseOver';
}

Does anyone has an idea ?

Answer 1

Soem quick ideas to refactor the code:

1. Implement rules for classes .suggestions and suggestionMouseOver with .sugestions and the :hover pseudo class selector in CSS:

    .suggestions {
        ... rules for mouse not over ...
    }
    .suggestions:hover { 
        ... rule changes for when when hovering over *.suggestions ...
    }
   

   This should remove the need to monitor mouseenter and mouseleave events on .suggestion class elements simply to change styling. (Note mouseover and mouseout can fire over when mousing over child elements of the hover class.)

2. Generate a data- attribute on HTML elements to record the index number of the suggestion. Currently this implemented as a numeric suffix on the id attribute value which, while remaining a possibility, is not the cleanest solution:

   <div class="suggestions" data-num="0">...</div>
   <div class="suggestions" data-num="1">...</div> <!-- and so on -->
   

3. Although event processing could be delegated by providing a single event on a common parent element and looking at the target attribute of events fired, the straight forward approach may still be to stay with an event listener on each div element:

   function sugestionMouseDown( event) {
       let suggestionDiv = event.currentTarget;
       let suggestionNumber = suggestionDiv.dataset.num;
       // process parameters suggestionDiv and suggestionNumber
       // ...
   }
   Array.from( document.getElementsByClassName('suggestions') )
   .forEach( div => div.addEventListener("mousedown", suggestionMouseDown));
   

Answer 2

Thanks to @traktor53 good advices, this is what I came up with.

Note for futures researchers on stackoverflow : the goal is to replace the javascript inline event handlers containing an argument (ex.: onmouseout(0), ...). The reason behind is to comply with the Content Security Policy (CSP) which is not allowing inline script for obvious reasons. I apply the code below on a custom jsr_class.js fetching results on GeoNames API.

HTML

It's dynamically generated as this :

<div class="suggestions" id="pcId0" data-num="0"> Vannes - (56000) &nbsp;FR</div>
<div class="suggestions" id="pcId1" data-num="1"> Vannes - (56001 CEDEX) &nbsp;FR</div>
<div class="suggestions" id="pcId2" data-num="2"> Vannes - (56002 CEDEX) &nbsp;FR</div>
<div class="suggestions" id="pcId3" data-num="3"> Vannes - (56003 CEDEX) &nbsp;FR</div>

CSS

The goal here is to replace the old onmouseover & onmouseout functions

.suggestions { 
    font-size: 14;
    background-color: #fff; 
    border-radius: 5px; 
}

.suggestions:hover { 
    font-size: 14;
    background: #456ae7; 
    color: white; 
    cursor: pointer; 
    border-radius: 5px;
}

Javascript

I didn't wanted to modify my original function for pratical reasons, I know cleaner methods can be done.

function triggerMouseDown( event) {
let suggestionDiv = event.currentTarget;
let suggestionNumber = suggestionDiv.dataset.num;

suggestBoxMouseDown(suggestionNumber);
}

document.getElementById("placeInput").addEventListener("change", function() {

Array.from( document.getElementsByClassName('suggestions') )
.forEach( div => div.addEventListener("click", triggerMouseDown));
});