Today we take a look at an important JavaScript behaviour that will save you a lot of time and help you understand event binding better.
Transcript
Today let’s kick it right off we’re going to be talking about uh bubbling and if you don’t know what bubbling is it is this is the video for you so stick around for it maybe extending off of my uh forms masterclass series.
Now we are going to be doing in pine grove because you know I love pine grove but I hope the the ideas and things like that will translate very simply onto Webflow so if that is exciting and you’re all keen to do it then smash the like button, give it a good smashing and we’ll get on with it.
[Music] A few small announcements actually before we kick off, first of all I’ve got some very exciting news coming hopefully at the end of this week and maybe this is going to affect the channel I’m not too sure I’ve kind of been working really hard over the last couple of months on some new products some new ideas to help you guys uh learn web development and can kind of get better at being a..an agency.
Actually more specifically kind of teaching everything I do at Jupiter in the giraffe and what we do um there and trying to…trying to make it available to to everyone so hopefully there’s gonna be some cool um exciting things uh at the end of this week like I say with with many more to follow over the course of the year and work really hard on it. I hope it lands well and like I say it may very well end up on the channel so that’s quite cool.
The other thing is, I bought one of these tasty mothers and I’m I’m trying to play around with it with regards to my business. I have been playing games of course you know um echo VR is my jam at the moment so but I’m keen to try and maybe see if I can I work this into the channel as well because I am I’m folk…I am focused on how it can help you with your productivity and your business and coding and and I’ve got some assumptions at the moment which I’m kind of putting together in like a blog post or whatever but if you are excited to you know want to hear about what I’m getting up to with the with the oculus it will always be named the oculus in my eyes.. uh what I’m getting up to there then then let me know because I’m keen I’m excited bye I’m excited by the whole web 3.0, I’m thinking things like web VR API I’m thinking things like business meetings or presentations and stuff like that.
So, again just thought I’d mention that and see if you were um were keen for it let me know so let’s jump into this like I say we’re going to be talking about bubbling and form events building forms and and having JavaScript power those forms because if you haven’t seen my Webflow forms masterclass series do check it out if you haven’t we we go through various different phases of building up like a multi-stage form and various things and I don’t think I really delved into that so like I say we’re gonna be I’m gonna get my notes up as well we’re gonna be talking about bubbling.
What the f is bubbling? bubbling is kind of what it sounds like actually and it’s this idea that events that are made on the dom actually bubble up. You can listen for events of various different stages um or or very different various different hierarchies of the of the dom click events is the easiest thing to kind of demonstrate here so let’s just do it with a click event.
And what I’m going to do I’m going to bind a click event to to probably not this button because that’s a submit button we’re going to bind it to this input but I’m not going to listen for that click on the on the input tool I’m going to listen to it on the body of the of the document so we can do it all in the browser here we’ll play around with pi and grow in a little bit but what I’m going to do I’m going to I’m going to go document.body so I’m going to get the body and I’m going to add event listener and I’m going to add a click event to that and we’re going to fire a function……..and we’re just going to say console, log, click.
So, what I’m doing here getting the body adding a click event to it and just console login click right we’ll add that there we go we’ve got some errors here what you can see now is that whenever I click somewhere it bubbles up to the to the…to the document how does that sound on bubbling like does that make sense what what’s what’s happening with uh with…with events how they’re kind of rising up the dom how we can pick up on events on elements that..that haven’t even you know a click event for example we can we can listen for a click event on an element but not actually bind the event onto that element itself.
Um…that’s essentially bubbling let me know if that kind of makes sense but it essentially is a fundamental kind of concept bubbling is kind of something that JavaScript does. Let’s now dig into why we’re here right? how we can use bubbling? how we can leverage bubbling to build cleaner websites? okay…cleaner code on our websites as well.
So, I’ve got on this page is some radio fields you can see the click event is kind of picking them up here. The problem is and more specifically actually if you’re using raw JavaScript because jcrew does a lot for us um but we’ll demonstrate it in just plain JavaScript first and you can see why this why this is helpful because you might not have you you might not have access to jcrew I try and avoid unless I have to with Webflow as an example they give you jcrew here I’m using the material um design thing and they give me jcrew so I might as well use it but I’m not going to bring it into a website that doesn’t need it it’s it’s it’s really handy but there’s just so much that it gives you that you don’t really need.
So, we’ll demonstrate it in raw JavaScript and what I’m going to do I’m going to let’s write out the kind of typical way you might might do this um which I see a lot of which is kind of like a no that we can you then use bubbling to to help us out. So let’s find our radios okay and document.query selector or and we’re going to go input with type radio.
Now, this isn’t great code because we want to make sure we’d want to find the kind of form first and then within the form find the radios to be a bit more specific because especially if we have multiple radio buttons all over the over the page so it’s not great code but for argument’s sake this is kind of how we would kind of typically…typically do it.
Now, because this is a node list we can’t bind click events to this node list or whatever so what what you’d typically do is go array dot from create make this into an array and then you’d go radios dot four each and light radio index and then you go radio dot and event listener..um out of the listener click.
What we’ve got right now I have bound a click ml uh click event to each of these radio buttons so when I click on these you get that event. So, back to this this is this this is the way that I see um events being handled in forms is having these kind of getting all of the elements and looping through them and then binding a click event okay.. and this is this kind of works I mean we saw there that um you know I could click that and whatever and I mean let’s go target dot value you know you get access to these values.
Jcrew makes it super easy to do this you might do it in jcrew by going, let’s do this, this, this, we can get rid of that, and get rid of that, and we can go radios dot on click okay and you can see that jcrew takes up takes care of all that for us but once again you might not be using jcrew…jcrew is great but it’s it’s bulky.
So, given this and giving our knowledge of bubbling what do you think we can do here instead of getting each of our radios and binding a click event what do you think we can do here knowing that we have bubbling on our side looking at our dorm tree here and by the way if you haven’t used Pinegrow it’s very similar to very similar to Webflow in that it’s kind of a no code editor but you can you do it all on your local machine and then you host it yourself whereas obviously Webflow takes care of the hosting and and all the rest of it I think this is a lot more powerful I mean it is a lot more powerful than Webflow but um a lot of people enjoy Webflow because it kind of takes care of a lot of other things for you.
But anyway I digress the event does not go down that span does not receive this event mainly because we’re not listening for it but we won’t confuse things, we won’t receive the event on the span it bubbles up.
You can…you can listen to that event on the label, you can listen for that event on this div, you can listen for that event on the field set, and you notice I skipped these here because they’re siblings they’re not they’re not high up so that event will be captured by all these and it will bubble up until it gets to the probably the document.
I think you can listen to the document or the body I forget which one so we’ve got all our inputs they’re all encapsulated in this field set so what I’m going to do I’m going to bind a an event onto dot um query selector and I’m going to find the field set…they might not click on an element to change it right so what we want to do is say on the change event run this function and then let’s console.log the “e e” dot get actually let’s do “e” so that event is being even though we bound it to the field set this event is firing and what we have here is that we have the current target and we have the actual target that’s actually producing the event the change event.
So, we have access to that go in there target dot value and this is all on the field set this isn’t actually on the event itself you remember the code we wrote before which was and then the function you know from that to just one line of code and no matter what happens here and we might change the layout we might do a bunch of things we might actually um the the contents of this field set might change over time and we’ve wrote one line of code here that actually takes care of all of that for us uh what can we do we can insert a element layout div after it and inside of that we’re going to put a paragraph and we’re going to say this is some secret text to let you know something okay and, I’m going to hide this.
I’ve done this recently when you select one um radio button so it’s a contact form when it when you select one option on the radio button for a specific type of contact so one of them is to contact me the other one is to make a suggestion. If they select make a suggestion, I present another set of radio buttons but in this case I’m not going to do that I’m just going to have a little bit of text here so if we go display num let’s give it an id show me, if um…if this equals option three..then, comment get okay.
Let’s have a look at this week five minutes later….oh I needed to scroll down okay so we’re hiding and showing that what we’ve just learnt there is binding an event higher up without having to loop through every single element and bind an event to each element in this specific cases is radio.
I think this is this can be really really powerful and I think that it can stop a lot of kind of um just messy code I guess, and making sure that we’re uh understanding what’s happening you know using bubbling to simplify our code using that to our advantage can be really really beneficial.
I mean I hope that was helpful that’s kind of all I wanted to go over today and I hope this kind of give you a little brief look at Pinegrow. I mean we didn’t really look at it too much to be fair we just stayed in the JavaScript and I’m sure if you’re using Webflow you would also stay in the uh the JavaScript um so this should be easily portable.
Thanks so much for tuning in I will look to do some more form stuff going forward as well because it seems like so that’s a pretty um people enjoy that subject on my channel so, thanks for sticking around and until next time I’ll uh…I’ll see you later [Music].