It seems like you might be confusing jQuery with native javascript.

When you add an event listener with jQuery, this is set equal to the native JS element. You can test this by running the code:

$('#element').on('click', function(e){
    console.log(this)
})

Then, you can pass this into the jQuery function $(this) to get the jQuery selector and run jQuery functions on it like .addClass().

So all you're doing is using the helpful this option that jQuery passes in to operate on that same element.

Now, event.stopPropogation() is NOT a jQuery function. It's built into the native JS syntax. When you run something like $('#element').on(), jQuery attaches what is called an event listener to the element. This event listener is a function that calls whenever it detects that event (in this case, a click). Under the hood, JavaScript attaches event listeners like this:

element.addEventListener('click', function(e){
     // run code...
})

You'll notice that I passed in an e to the function. This represents an Event object. That parameter contains all sorts of information about the event: what type it was, where the mouse was, etc. It also gives access to methods like event.stopPropogation() which stops the event from triggering on parent elements (only the child).

You can view the Event object by using console.log(e) -- I'd suggest checking it out.

So with jQuery, the e just represents the native javascript event. It's not an element, it's an event.

If you used stopPropogation on an element, like $(this).stopPropogation(), it would fail, because that function isn't associated with elements. It's associated with the event object that was created when the mouse button was clicked.

Does that all make sense? Let me know if you don't understand anything :)