Removal of Event Handler in jQuery


 jQuery Event Handler

An event handler is supposed to handle inputs received in a program or events. They are basically, callback routine which operates asynchronously. Event handler is an important element of info that lies inside generally in GUI (Graphical User Interface) or in some sort of input routine. Key strokes, action selections, timer expirations or mouse activity are included in GUI side. The input side includes file and data streams opening or closing as well as data reading.

 

After the successful establishment of an event handler it is effective life long till webpage exists. unbind()  is the command provided by jQuery for event handler removal.

 

 Syntax:

selector.unbind(eventType, handler)
or
selector.unbind(eventType)

 

In the above syntax, eventType denotes a string that contains a JavaScript event type like click or submit. To remove a particular listener handler is used

 

For jQuery ≥ 1.7

Although event API is updated in jQuery 1.7 and onward yet bind()/unbind() are available with backward compatibility, but based on personal experience I would advise you to prefer the on()/off() functions. It is stated as below:

 

$(‘#myimage’).click(function() { return false; }); // Adds another click event
$(‘#myimage’).off(‘click’);
$(‘#myimage’).on(‘click.mynamespace’, function() { /* Do stuff */ });
$(‘#myimage’).off(‘click.mynamespace’);

 

For jQuery < 1.7

 

 Here we simply add another click event to the image without overriding the previous one.
$(‘#myimage’).click(function() { return false; }); // Adds another click event

 

Unbind can be used to remove every click events:
$(‘#myimage’).unbind(‘click’);

 

 

In order to add a single event and then remove it (without removal of any other that might have been added) then you can use event namespacing:
$(‘#myimage’).bind(‘click.mynamespace’, function() { /* Do stuff */ });

 

To simply remove your event only:
$(‘#myimage’).unbind(‘click.mynamespace’);

 

Looking forward to responding to your queries and comments regarding the Removal of an Event Handler in jQuery. If any information you want to get included I will update this article with it. on() method provided by jQuery can respond to any event on specific elements. This process is event binding despite not being the only method provided for event binding yet it is most suitable method for event binding specially for jQuery 1.7+

 

About Singsys Pte. Ltd. Singsys is a solution provider that offer user friendly solution on cutting edge technologies to engage customers and boost your brand online results from a set of certified developers, designers who prefer optimized utilization of the available resources to align client’s idea with their skillset to reflect it into a Mobile applicationWeb application or an E-commerce solution

 

You may be interested in following:

  1. HTML CSS and JavaScript tools and libraries for Productivity Boost
  2. 14 Fantastic Mobile Application Frameworks to Build with HTML, CSS & JavaScript in 2016-17