Advanced Search

unobtrusive multiple event handlers on single element using jQuery

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. Example of inline event handlers:
  3. <input type="text" name="date" onchange="validateDate()" />
  4.  
  5. This is bad.
  6. The purpose of markup is to describe a document's structure, not its programmatic behavior. And what if we need to set handlers for several events on a single element?
  7. */
  8.  
  9. // The unobtrusive solution:
  10.  
  11. <input type="text" name="date" id="date" />
  12.  
  13. /*
  14. A script that runs when page is loaded into the browser, looks for relevant element(s) and set them up accordingly: (using jquery)
  15. */
  16.  
  17. var message = "mouse entered or left.";
  18.  
  19. // passing the variable in by value through eventData:
  20. $('#date').bind('mouseenter mouseleave', {msg: message}, function(event) {
  21.   alert(event.data.msg);
  22. });

URL: http://api.jquery.com/bind

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.