So what actually an event? An event can be considered as a result of an action triggered by a process which can be a process clicking of a user or when a page is loading.

In javascript, when we want to add an event to a button, we will need to use a function named addEventListener to attach an event. Please see the following example for more details.

Let says we have the following button in our page.

<p><input type="button" value="Click Me" id="btnAction"/></p>

var btn = document.getElementById("btnAction");
var eventListener = function (event) {
    alert("You have clicked me");
	event.preventDefault();
};
btn.addEventListener("click", eventListener, false);

$("#btnAction").click(function(event){
	alert("You have clicked me");
	event.preventDefault();
});

Alternatively in JQuery, you can use the following keyword on as well.

$("#btnAction").on("click", function(event){
	alert("You have clicked me");
	event.preventDefault();
});

So how to remove an event handler we just created from JQuery, it is pretty simple. Either you can use the keyword .off or unbind.

$("#btnAction").off("click");

// or you can use the following option
$("#btnAction").unbind("click");

Attaching multiple events in JQuery

Attaching multiple events in JQuery is quite simple, you can wrap the function attached separated by comma like below.

$("#btnAction").on("mouseenter", function() {
    alert("Hovering over");
}).on("mouseleave", function() {
   alert("Hovering out");
});