发出将addEventListener事件添加到documentFragment中的Input的问题

Question

I am creating a div using createDocumentFragment(). In the Div is a table with a list of input. When you click on any of the checkboxes I want to trigger the alert('Yes'). when I add the event it does not add it to the input but with Firefox it seems to call the alert when it is added to the table.

Can someone explain what I am doing wrong?

---

function deptFilter(rPattern)
{       

var lclData = JSON.parse(rPattern);                 
var  loc = document.getElementById('show2');                
var arrayKeys = Object.keys(lclData);               

    var outputData;
    var LCL_List
    var LCLTables;
    var LCLtd;
    var LCLtr;
    var LCLInput;
    var LCLDiv;



    var LCL_List = document.createDocumentFragment(document.createElement('DIV'));
    LCL_List.id = 'LCLTable';



for(var x = 0; x < arrayKeys.length; x++)
{

LCLDiv = LCL_List.appendChild(document.createElement('DIV'));
LCLTables = LCLDiv.appendChild(document.createElement('TABLE'));                                

                for(var y = 0; y < lclData[arrayKeys[x]].length; y++)
                {

                    LCLtr = LCLTables.appendChild(document.createElement('TR'));
                    LCLtd = LCLtr.appendChild(document.createElement('TD'));
                    LCLInput = LCLtd.appendChild(document.createElement('INPUT'));
                    LCLInput.id = lclData[arrayKeys[x]][y]['Name'];
                    LCLInput.type='checkbox';
                    LCLInput.addEventListener("click", alert("Yes"));       


                }   



        }


        loc.appendChild(LCL_List);



}

Answer 1

This is the way to add event listner:

LCLInput.addEventListener("click", function() {
    alert("Yes");
});

Answer 2

When you install an event handler like this:

LCLInput.addEventListener("click", alert("Yes"));  

You're executing alert() immediately and then passing the return value from that to addEventListener() . This is obviously NOT what you want. Instead, you need to pass a function reference to addEventListener and that function will then call your alert() sometime later:

LCLInput.addEventListener("click", function(e) {
    alert("Yes");
});  

---

Or you can define a named function and pass just its name:

function handleClick(e) {
    alert("Yes");
}

LCLInput.addEventListener("click", handleClick);