Adding eventListener to just created element

Question

UPD1: Sorry someone moved topic to C# VB, i dint create it here.

Hi everyone.

Im tryin to add event to newly created element but instead event just fires every time i add it and doesnt work at all.

Here's my code.

for (var i = 0; i < arr.length; i++) {
            var elem = document.createElement("button");
            elem.innerHTML = list[arr[i]].title;
            elem.addEventListener("click", click(this), false);
            
                
            parent.appendChild(elem);


        }

Answer 1

I dont know how this happens but this way it doesnt work.

elem.onclick = click();

and this one it works.

elem.onclick = function () { click() };

if someone cal explain, it will be great.

Answer 2

Hi Vyachslav,

It looks like a JavaScript issue, why someone moved to C# forum. I will move it to HTML5 and JavaScript forum.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 3

The reason for your first code snippet might be on:  

elem.addEventListener("click", click(this), false);

Read this: http://msdn.microsoft.com/en-us/library/windows/apps/hh441312.aspx, the second parameter is for a handler(event) but not a handler(object) . And I think the reason for your code not working might be your event registration failed. For more information you could read: Quickstart: Adding HTML controls and handling events.

And for the second question, I don't know why, I will ask someone to see if I can get a proper answer.

==UPDATE==

You could try following code in your Browser, you will see that if you are using function(), your click() event will be attached to button.onclick() and would be execute each time the button has been clicked. If you are using button.onclick() = click(), each time the page initialized, the click() event will be fired automatically, which means the left part is useless, the click() event is fired but but attached to the button click().

The same, if in your code, you use "elem.onclick = click();" , the click() event will be fired directly but not attached to the button onclick().

<input type="button" id="btn" value="click me" /> 
<script> 
    var elem = document.getElementById("btn"); 
   // elem.onclick = function () { click(); }; 
    elem.onclick = click(); 

    function click() 
    { 
        alert("abc"); 
    } 
</script>

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

The problem here is that you're calling the handler function and thus passing the return value instead of the function. This is true in both the addEventListener and onclick code above. In both cases, having click() or click(this) makes a call to click and its return value (probably undefined) is what gets assigned as the event handler. Clearly this won't work.

With the onclick assignment, simply make it onclick=click; (no ()'s). For addEventListener, you want to use the syntax click.bind(this) to get the this pointer to show up in the event handler.

Your option of onclick = function () {click (); }; works because you're properly assigning a function to the event handler instead of a non-function result. So again, just remove the ()'s or use handler.bind(this).

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

Also see second edition preview