Hello, in this jQuery video, I'm going to show you how to bind event. So binding event handlers. So we got this no click event that we've assigned to this, all this tool bar should say, with detecting when this click has occurred on a paragraph tag. But if we want to bind the event instead, process is almost identical. Instead of doing doc clip, you do dot point. Then you bind the type of event.

So click, comma, these are the parameters of event. And if I were to, I'm just going to console log actually. Hello. If I comment this out, and I reload it, go to the court So click it, it works, you know the way it would have done if we use the clicker method. So why would we want to bind an event? There's two main reasons.

One, if at a later date, for example, let's say the user does something. And a new sort of kick functionality is implemented as a result or a new event functionality, you can bind another method to it. So at the start, when the page loaded might have one particular functionality when the paragraph is clicked, for example, but maybe you do something and the click event needs to do something else now so you can know rebind a function to and let me demonstrate that boy. If I were to, I'm going to create a button. What and if caught is going to say fine. What I'm going to do is just do a typical, you know, click, you can bind if you want to mark and do it like this on return hash or an idea should say that when it's clicked, we are going to bind it with this.

And let me just sort of indentation. One that's been on the move is code from here, and I'm gonna say before bind after bones, and if I reload, what happens? I clicked this, it said before bind, a four click bind as the printing off in Episode Four, click it now just after bond. But it still had this particular click as well not because this is slightly different. This is just a A method on it. This is designed in a particular event.

So if you want to be able to override a particular event, make sure you just bind them. So if I do this now watch this and I played this before who can simulate the console logs and I finally load it was sharpened that before bind a click that I click it we only get still get in before one that I'm extremely weird. I will still get in before buying well. That right there, I need to find it. So what I need to do is just select it. So to duck on, bind.

Then you specify the attribute method that you are on binding. So, for example, a knife or reload it clicked up for click bind. Now I click it. As you can see, we only get that. So my bad when you need to do is if you bind it normally, then when some event occurs, in this case, the bind button, click on bind it and then your bind a new method to it. So that means it will run this bit of code when clicking the adapt button.

So that just makes sure your finger dynamic, things aren't fixed as well, you can go a step further if you want to actually have the method exploits function here, you know, I'll say after going and you'll take the parameter event. And we are going to grab hold of that and I'm gonna say after by function we're going to do comment this out. So this is still in the code on the GitHub page. The only difference here is, instead of binding it with an inline method, we bind it with a function call. So I do after bind, because I'm calling this function, and I pass in the event as well. Now if I were to reload, click that we have before buying for click that that cause it immediately.

If you do not want to call immediately. And you want to actually properly bind it. I just want to show you all the different nuances or this need something similar to this. But instead, you replace that code with this code right here. And now Run it. Watch what happens.

Before one click that we get nothing for click it this get the active bind function. So I'm hoping what's the benefit of this approach versus disapproved? Isn't this technically less code, and in a way it is. But you might be using this function in several different locations, maybe you're binding it in several different locations, or just using in general, well, this method is in line and this function is unique only to this. And any changes I made here, or specific to this selector, you might want that that is fine. But if you don't, and you're going to use that functionality, multiple locations, wrap it up inside a function, and then literally just call that method.

So you still have the inline method, but that inline method in itself, cause a number method. So that's it for binding and removing event handlers. If you have any questions, feel free Pop me a message and as usual, I look forward to seeing you in the next video.