(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. Priorities Of jQuery Events
Aug 03

Priorities Of jQuery Events

  • August 3, 2015

The customization of the functional features in jQuery can be enhanced to their best potential with appropriate expertise and effective technical improvisation. This helps in attaining productive results with minimal efforts and yields the most optimized solutions. In jQuery, you can bind multiple event handlers to one event for one DOM element. These will execute in the sequence they were bind. As in the example below, suppose you have DOM as:

1
2
3
4
5
6
7
...
<body>
<a href='#' id='link'>Click Me</a>
 
<ol id='#log'></ol>
</body>
...

JavaScript is as:

1
2
3
4
5
6
$('#link').bind('click', function(event){
$('#log').append("<li>First Handler</li>");
});
$('#link').bind('click', function(event){
$('#log').append("<li>Second Handler</li>");
});

When you click on the link, you will get output something like below:

1. First Handler
2. Second Handler

That’s the standard sequence of event binding. Let’s suppose if we change the code of first event handler to this:

1
2
3
4
$('#link').bind('click', function(event){
$('#log').append("<li>First Handler</li>");
event.stopImmediatePropogation();
});

In this case second event handler will not execute, because first have stopped event propagation. To make it executable, we need to change the priority of events binding, so that second event handler will execute first and it must not be stopped by first handler. It is not available to jQuery by default, so we have to create a custom method for it as follows:

1
2
3
4
5
6
7
8
9
$.fn.bindFirst = function(name, fn) {
this.on(name, fn);
this.each(function() {
var handler, handlers;
handlers = $._data(this, 'events')[name.split('.')[0]];
handler = handlers.pop();
handlers.splice(0, 0, handler);
});
};

Now lets use our new method:

1
2
3
4
5
6
$('#link').bind('click', function(event){
$('#log').append("<li>First Handler</li>");
});
$('#link').bindFirst('click', function(event){
$('#log').append("<li>Second Handler</li>");
});

Now we the get output now like this:

1. Second Handler
2. First Handler

Note here that the second handler changed its priority to first and executed before the first handler. This is useful in many situations where some plugins bind the event and then stop its propagation.

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (490)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (56)
  • Implementation Notes (148)
  • Learn More (156)
  • LMS (8)
  • Look Inside (10)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • GitHub Actions- Automate your software workflows with excellence
  • Yii Framework – Accomplish Repetitive & Iterative Projects with Ease
  • A Recipe for CRM Software Development
  • Are Agile and DevOps the same?
  • The Data Scientist’s Toolset

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com