In this tutorial, we will learn how to handle bind an event using JavaScript. Events are the actions or occurrences in the system by the browser or users. There are various types of events that represent various activities performed by the browser or users. For example, if a user clicks on a button, it triggers an event named "click." Similarly, if a webpage finished loading, it triggered an event called "load." An Event Listener is a program that continuously listens to or waits for an event to occur. It is one of the most important parts of JavaScript. The ... Read More

The bind( type, [data], fn ) method binds a handler to one or more events (like click) for each matched element. It can also bind custom events.Possible event values − blur, focus, load, resize, scroll, unload, click etc.Here is the description of all the parameters used by this method −type − One or more event types separated by a space.data − This is optional parameter and represents additional data passed to the event handler as event.data.fn − A function to bind to the event on each of the set of matched elements.ExampleYou can try to run the following code to learn how to ... Read More

To handle a mouse right click event, use the mousedown() jQuery method. Mouse left, right and middle click can also be captured using the same method. You can try to run the following code to learn how to handle a mouse right click event:ExampleLive Demo $(document).ready(function(){    $('.myclass').mousedown(function(event) {     switch (event.which) {         case 1:             alert('Left mouse button is pressed');             break;         case 2:             alert('Middle mouse button is pressed');             break;         case 3:             alert('Right mouse button is pressed');             break;         default:             alert('Nothing');     } }); }); Click me

To handle a double click event using jQuery, use the dblclick() event. When an element is double clicked, this event occurs.ExampleYou can try to run the following code to learn how to handle double click event using jQuery −Live Demo $(document).ready(function(){    $("p").dblclick(function(){      alert("You have clicked this twice.");    }); }); Double click

To handle a click event using jQuery, use the click() method. You can try to run the following code to handle a link click event using jQuery −ExampleLive Demo  $(document).ready(function(){     $("a").click(function(){         alert("You've clicked the link.");     });  }); Click below link. Click

To remove everything inside a div element, use the remove() method. You can try to run the following code to remove everything inside a element −ExampleLive Demo $(document).ready(function(){     $(".btn").click(function(){         $("div#demo").remove();     });         }); Hide the elements inside div Inside div- This is demo text. Inside div- This is demo text. Inside span- This is demo text. Inside span- This is demo text.

To remove all elements except the first one, use the remove() method with the slice() method in jQuery. You can try to run the following code to remove all elements except for first one using jQuery −ExampleLive Demo $(document).ready(function(){     $(".button1").click(function(){         $("span").remove();     });          $(".button2").click(function(){          $('span').slice(1).remove();      });         }); Hide all, except first element Hide all the elements This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.

To remove all child nodes from a parent, use the empty() method. The empty() method removes all child nodes from the set of matched elements.ExampleYou can try to run the following code to learn how to remove all child nodes from a parent −Live Demo           jQuery empty() method                              $(document).ready(function() {             $("div").click(function () {                $(this).empty();             });          });                            .div {             margin:10px;             padding:12px;             border:2px solid #666;             width:60px;          }                             Click on any square below to see the result:               ONE       TWO                

The insertAfter( selector ) method inserts all of the matched elements after another, specified, set of elements.Here is the description of all the parameters used by this method −selector − Content after which the selected element(s) is inserted.ExampleYou can try to run the following code to learn how to use jQuery.insertAfter() method in jQuery −Live Demo           jQuery insertAfter() method                              $(document).ready(function() {             $("div").click(function () {                $("#source").insertAfter(this);             });          });                              .div {             margin:10px;             padding:12px;             border:2px solid #666;             width:60px;          }                             Click on any square below to see the result:                                                

The insertBefore( selector ) method inserts all of the matched elements before another, specified, set of elements. Here is the description of all the parameters used by this method −selector − Content before which the selected element(s) is inserted.ExampleYou can try to run the following code to learn how to use jQuery.insertBefore() method in jQuery −Live Demo           jQuery insertBefore() method                              $(document).ready(function() {             $("div").click(function () {                $("#source").insertBefore(this);             });          });                              .div {              margin:10px;              padding:12px;              border:2px solid #666;              width:60px;          }                             Click on any square below to see the result: