Peculiar scope switching in different html adding functions

Question

When adding an event listener like so

    class A{

        setUp(){
            //addEventListener
            $("#id")[0].addEventListener("click",this.rollDiePressed);
        }

        rollDiePressed(){
            console.log(this)
        }

        addHtml(){
            var actionTemplate =           
                '<div onclick="ctrl.rollDiePressed()">' +
                'ROLL' +
                '</div>'

                //add the html
                $("#htmlarea").html(resultHtml);
        }

    }

Clicking on the html would mean that "this" inside rollDiePressed is reffering to the element itself. If we wanted it to refer to the class that we would need to do this

$("#id")[0].addEventListener("click",this.rollDiePressed.bind(this));

All is good so far. However, when adding html like in addHtml() calling rollDiePressed() is not referencing the element itself as i would expect (and as it happens in the method setUp) but is referencing the class itself!

Why does this happen? I thought by default the event would always reference the element. adding "this" as a reference on the html solves it, im just very interested in understanding why this happens.

Vasan · Accepted Answer · 2017-10-31 11:34:25Z

1

Because when you do <element onclick="myfunc();">, the function is merely being invoked as part of the actual (implicit) event handler's body; the function is not the event handler by itself i.e. it is not attached to the element. The this keyword points to the owner of the function, which is still the class in this case. If you had done element.onclick = myfunc (note: function is not invoked here, only bound) instead, you would've got the triggering element as this.

answered Oct 31, 2017 at 11:34

Vasan

4,9564 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Return-1 Over a year ago

great, this makes a lot of sense actually. thanks for the time

Collectives™ on Stack Overflow

Peculiar scope switching in different html adding functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related