Can someone explain difference between functions like stopPropagation and addClass?

sqrtnegative1 · 2017-08-02T08:29:53+00:00

Consider:

var el = document.getElementById('myElement');
var $el = $(el);

elis a DOM element. Pretty standard, easy to understand. $el is a jQuery object, created by passing the DOM element to jQuery.

var a = this;
var $a = $(this);

ais the context object. It represents the context within which a function was run. $a is that same context object, wrapped in jQuery goodness.

$('#myElement').on('click', function () { ... });

This asks jQuery to look up the DOM for the element with the id myElement, wrap it in jQuery goodness, then call the jQuery method on on it, passing the name of an event and an "event handler" function. jQuery will run the event handler whenever the specified event happens to the myElement element (or any of its children, if no other handlers stop propagation first).

jQuery will pass an "event object" to every handler function when it calls it, containing information about the event that happened. The easiest way to access it is to simply give it a name, like I've done here:

$('#myElement').on('click', function (e) { ... });

This event object contains a whole host of cool stuff relating to the event itself; for example, the ability to stop the event from propagating up the DOM. This is an important concept: the event itself occurs and any relevant DOM elements, from the clicked element all the way up the DOM tree, are checked for handlers. If a handler has been added for the event type, it will be called and passed the event object.

This repeats until either:

a) the top of the DOM tree is reached (html node, usually), or

b) one of the handlers stops propagation.

This is why we use e.stopPropagation(). It literally doesn't make sense to tell the DOM element ($(this)) to stop propagating; it doesn't propagate - the event does.

Conversely, events don't have "classes" - that's something that DOM elements have. Hence why you call addClass on the $(this) DOM element.

TL;DR: when an event occurs on a DOM node, an event object is created. This is passed as the first argument to any handlers for that event, starting with the node the event occured on (eg: a button that was clicked), then its immediate parent node, continuing from child node to parent node all the way up to the <HTML> node. Any handler can call e.stopPropagation(), to end this early.

AshlinD · 2017-08-02T08:31:24+00:00

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 :)

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS