我将如何在 <li> 元素使用事件目标属性？

Question

Say I want to only access the c.symbol value that has been added to the li element created in the for loop within another function. How would I go about doing that?

for(let c of data){
        let node = document.createElement('li');
        node.textContent = c.companyName + ', ' + c.symbol; //only want c.symbol
        companyList.appendChild(node);
        node.addEventListener('click', function(e){
            if(e.target && e.target.nodeName.toLowerCase() == "li"){
                populateCompanyInfo(e);
            }
        });
    }  
function populateCompanyInfo(e){
    //I want to be able to access the c.symbol value in here using the taget

}

Answer 1

I recommend you to use dataset attribute for storing data you want to attach to elements.

 let data = [{ symbol: "EleFromStack", companyName: "Stack" }]; let companyList = document.getElementById("companyList"); for (let c of data) { let node = document.createElement('li'); node.textContent = c.companyName + ', ' + c.symbol; //only want c.symbol node.dataset.symbol = c.symbol; // Here I'm storing the c.symbol value companyList.appendChild(node); node.addEventListener('click', function(e) { if (e.target && e.target.nodeName.toLowerCase() == "li") { populateCompanyInfo(e); } }); } function populateCompanyInfo(e) { console.log(e.target.dataset.symbol) } 

 <ul id="companyList"> </ul> 

Answer 2

You can just split the textContent of event.target to get c.symbol :

function populateCompanyInfo(e) {
    var cSymbol = e.target.textContent.split(", ")[0];
    //Do something with cSymbol
}

Answer 3

One option is to keep the anonymous click handler function , copy c.symbol and pass it as an argument to populateCompanyInfo :

for(let c of data){
        let node = document.createElement('li');
        node.textContent = c.companyName + ', ' + c.symbol; //only want c.symbol
        companyList.appendChild(node);
        let cSymbol = c.symbol;
        node.addEventListener('click', function(e){
            populateCompanyInfo(e, cSymbol);
        });
    }  
function populateCompanyInfo(e, cSymbol){
    // c.symbol is the second argument.
}

You could also pass the entire data object by calling populateCompanyInfo with c as its argument if you ever needed to access other data properties:

 populateCompanyInfo( c); // if the event object is not needed