Confused about 'this' when using jQuery when passing in a function to be used as a callback

Question

So I've been trying to learn what 'this' points to under different circumstances. From what I have learned, it depends on the site-call of a function and the following:

If the function is called on its own, the 'this' keyword will point to the global object.

If the function is called as a property of an object (as a method), the 'this' keyword will point to the parent object.

If a function is used as a function constructor, 'this' will point to the newly created empty object.

Then you have call, apply, bind, where you can decide which object 'this' points to.

However, for the code below, I am a little confused.

$("ul").on("click", "span", function(event){
    $(this).parent().fadeOut(500,function(){
        $(this).remove();
    });
    event.stopPropagation();
});

Please correct me where I go wrong:

1. 'On' function is called and new execution context is created, 'this' is pointing towards new object created by $ function constructor.

2. 'On' remains on the execution stack and the passed in a function gets called gets popped on the execution stack, and a new execution context is created.

3. 'this' for the new execution context for the passed in 'callback' function, points to the 'span' object. Why?

The site-call for the callback function is within the 'on' function and is simply invoked as 'callback();', shouldn't the 'this' keyword, in this case, be pointing to the global object?

4. I can ask the same question for the inner 'this' also for the timeout function, which is pointing to span's parent which in my HTML is a 'li'.

How are the 'this' keywords pointing to these objects and not the global object?

Have I misunderstood something about 'this' in vanilla javascript, or is there some magic happening in jQuery?

Many thanks for your time and patience, Mark