JavaScript for WordPress Forums Vanilla JavaScript 1.4.6 – Event Propagation – Simple question about .id

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #27570


    I have another question, in this video in 4:55 it shows the example of calling directly

    Is witch a shorthand for calling getElementById? Right? or I misunderstood that?

    Zac Gordon



    is shorthand for

    this.getAttribute( 'id' )

    documentGetElementById( ‘X’ ) will select an element on the page with an ID assigned of ‘X’. Once you get that value, .id would give you the value X.

    So something like this:

    var el = document.getElementById( 'content' ); 
    console.log( ); // Prints 'content'

    Hope that helps! Good question 🙂



    I have another question!

    I’m trying to comprehend the event propagation, and I have like a conceptual question:

    I understand what is happening with the capturing and bubbling phase, what I don´t fully understand is what we are doing on the 3º parameter on the addEventListener method like:

    el.addEventListener( 'click', theFunc, false);
    el.addEventListener( 'click', theFunc, true);

    when we set false, or true on that parameter, what we are saying is basically “how the notification of the event will occur, if after or before the event target happens?”

    something like that? Maybe it’s a messy quesiton, and I´m not doing it correctly, let me know.

    Zac Gordon

    That is correct. The third parameter ‘useCapture’ determines whether or not the capturing phase is used.

    el.addEventListener( 'click', theFunc, false); // Uses Bubbling
    el.addEventListener( 'click', theFunc, true); // Uses Capturing

    It’s also helpful to know that if you don’t pass a third parameter is will use false by default and leverage bubbling.

    This can be a tricky topic, but hope that helps!!!


    Another quesiton:

    In the image at the video, it shows all the process of the capturing and bubbling phases

    In the example with the code, it shows that the event phases starts at the parent element.

    So the first image that starts the capturing and bubbling phase, and has the window object confuse me a little bit.

    So when we are going to capture the event, were did it start? at the parent element, or at the window object?

    Tx, I´m really enjoying the course, and learning a lot!

    Zac Gordon

    It always starts at the window level. But if you don’t have an event listener on the window you won’t notice it.

    In our example we have a listener attached to the parent element so that is where it ‘starts’ for us because that is the highest element in the tree we have a listener attached to.

    However, you could attach a listener to any element higher in that chain and have the same effect.

    Hope that explains it? Let me know if it’s still unclear.

    So happy to hear you’re enjoying the course!!!!!


    I think it starts to be clear

    So if we have another event listener on the body for example, we can be notified when the capturing phase or bubbling phase came across the body element?

    Zac Gordon

    If you want to use bubbling then you would need an event listener on the target with the third parameter set to true. In the examples you can see we play around with attaching both bubbling and capturing events.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.