Differences Between Nested Javascript Event Function

Question

What are the differences between the following two formats? Only format2 works.

Format1:

function test (e){
    var element = e.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
}
$("#import-excel-id-select").on('select2:select', (e) => {
    test(e);
});

Format2:

$("#import-excel-id-select").on('select2:select', function (e){
    var element = e.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
});

See What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript? & When should I use Arrow functions in ECMAScript 6? — Tushar
– Tushar, Commented Dec 15, 2016 at 3:47
You can also use $("#import-excel-id-select").on('select2:select', test); — Tushar
– Tushar, Commented Dec 15, 2016 at 3:47
Is this complete code? Are you using this inside handlers? — Tushar
– Tushar, Commented Dec 15, 2016 at 3:48
How does the first one "not work"? Can you post an error message? Consider creating a Minimal, Complete, Verifiable Example. — qxz
– qxz, Commented Dec 15, 2016 at 3:49

Felix Kling · Accepted Answer · 2016-12-15 03:59:24Z

What are the differences between the following two formats? Only format2 works.

There are multiple, but the most important one, the reason why one works and the other doesn't is because the value of this is different in both cases.

In the second example, this refers to the DOM element the function is bound to, because the function is used as event handler.

In the first example you are calling test as test(e) from the event handler. When calling a function this way this either refers to the global object or undefined (when in strict mode). this does not refer to the DOM element, and hence all the jQuery(?) methods fail.

How a function is called matters in JavaScript. See MDN -this for more information.

There is also no reason to have a function that simply calls another function with the same arguments. The first example could be fixed by just passing test:

$("#import-excel-id-select").on('select2:select', test);

vothaison · Accepted Answer · 2016-12-15 04:33:09Z

2

Format 1 is another way of writing:

$("#import-excel-id-select").on('select2:select', function (e) { test(e); });

But inside function test(), $(this) might not be what you expected.

So, one way to fix it

$("#import-excel-id-select").on('select2:select', function (e) { test.call(this, e); // or test.bind(this)(e); });

And, () => {} only runs on very new browsers with ES6 support.

answered Dec 15, 2016 at 4:33

vothaison

1,69415 silver badges16 bronze badges

Collectives™ on Stack Overflow

Differences Between Nested Javascript Event Function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related