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

This topic contains 7 replies, has 2 voices, and was last updated by  Zac Gordon 2 years, 5 months ago.

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

    bruno
    Participant

    Hi!

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

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

    #27575

    Zac Gordon
    Keymaster

    Actually,

    
    this.id
    

    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( el.id ); // Prints 'content'
    

    Hope that helps! Good question 🙂

    #27577

    bruno
    Participant

    Tx!

    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.

    #27579

    Zac Gordon
    Keymaster

    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!!!

    #27581

    bruno
    Participant

    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!

    #27585

    Zac Gordon
    Keymaster

    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!!!!!

    #27609

    bruno
    Participant

    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?

    #27613

    Zac Gordon
    Keymaster

    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.