Home / Articles / Programming languages / Scripting languages / JavaScript / jQuery for beginners: events

jQuery for beginners: events

jQuery for beginners: events
 
jQuery for beginners: events
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Before you begin reading this article, it is necessary to understand what the events actually are. For a web-page, events are any user's actions - this can be keyboard input and mouse movement, and of course "clicks" - all these things are events. Another example of an event can be a script, or so-called trigger.

Basic events

Let's start with the basics. jQuery works with all the events in JavaScript, here is a list of functions with short explanations:

  • change - change the value of an element (the value of the element, when losing focus, is different from the original one, when the focus is achieved);
  • click - click on the element (sequence of events - mousedown, mouseup, click);
  • dblclick - double click on the element;
  • resize - resize the element;
  • scroll - scroll the element;
  • select - select text (true only to input[type=text] and textarea);
  • submit - submits form;
  • focus - focus on the element - true for input[type=text], but in modern browsers also works with other elements;
  • blur - the focus away from the element - true for input[type=text] - triggered when clicking on another element on the page or any key event (e.g. switching tab);
  • focusin - focus on the element, the event is triggered by the parent element for which the event focus has occurred;
  • focusout - focus away from the element, the event is triggered by the parent element for which the event blur has occurred;
  • keydown - pressing a key on the keyboard;
  • keypress - pressing a key on the keyboard (sequence of events - keydown, keypress, keyup);
  • keyup - to let go key on the keyboard;
  • load - load element (img);
  • unload - unload the element (window);
  • mousedown - mouse click;
  • mouseup - to let go click on the mouse;
  • mousemove - cursor movement;
  • mouseenter - hover over the element, not true when changing the focus to the child elements;
  • mouseleave - cursor leaving the element, not true when changing the focus to the child elements;
  • mouseover - hover over the element;
  • mouseout - cursor leaving the element.

You can test the events with mouse events and form elements.

Most of these events can be emulated directly from the script:

<script lang="javascript"> $( '#menu li' ).click(); </script>

Triggers

To work with triggers in jQuery, following functions are predetermined:

  • bind( type, data, fnc ) - adds an event handler;
  • one( type, data, fnc ) - adds an event handler that will be triggered only once;
  • trigger( event, data ) - triggers event handler;
  • triggerHandler( event, data ) - triggers event handler, without triggering browser event;
  • unbind( type, fnc ) - removes all the event handlers from the element.
$( '.class' ).bind( 'click', function(){
  // do something
});
 
// call the handler
$( '.class' ).trigger( 'click' );
 
// disable the handler
$( '.class' ).unbind( 'click' );

 You can assign trigger almost to any object:

var obj = {
  test:function() {
    console.log( 'obj.test' );
  }
}
 
$( obj ).bind( 'someEvent', function(){
  console.log( 'obj.someEvent' );
  this.test();
});
 
$( obj ).trigger( 'someEvent' );

Namespace

Usually, if we want to create/remove our event handler, we must write the following code (already mentioned above):

// create handler
$( '.class' ).bind( 'click', function(){
  // do something
});

// remove all handlers
$( '.class' ).unbind();

But sometimes you do not need to remove all the handlers (for an example, if you need to disable processing of some controller use a specific plug-in), in that case, use namespaces. They are quite simple to work with:

// create handler
$( '.class' ).bind( 'click.namespace', function(){
  // do something
});
 
// call handler
$( '.class' ).trigger( 'click.namespace' );
 
// remove all handlers in the current namespace
$( '.class' ).unbind( 'click.namespace' );

Another example, let's assign handler that displays text into the console.

$( '.class' ).bind( 'click.namespace', function(){
  console.log( 'bang' );
});
$( '.class' ).trigger( 'click.namespace' ); //call the event, the handler will be triggered
$( '.class' ).trigger( 'click' ); // also works
$( '.class' ).trigger( 'click.other' ); // event from another namespace, the handler won't be called

There is also support for multiple namespaces (starting from version 1.3, to be exact):

$( '.class' ).bind( 'click.a.b', function(){
  // for namespaces a and b
});
$( '.class' ).trigger( 'click.a' ); // call the handler from namespace a
$( '.class' ).unbind( 'click.b' ); // disable handler for the namespace b

It's also possible to remove all handlers from a specific namespace:

$( '.class' ).bind( 'click.namespace', function(){} ); // click handler
$( '.class' ).bind( 'blur.namespace', function(){} ); // focus handler
$( '.class' ).unbind( '.namespace' ); // you changed your mind, and canceled everything

Working with live

Often, when generating pages in AJAX it becomes necessary to assign event handlers to new elements in DOM. For this purpose, there is method live (the first parameter - the name of the event, the second - the handler).

Here is an example of a problem:

  1. All internal links to the pages should load AJAX content into the element with id=content.
  2. Rule number 1 is true for links from the loaded content.

Implementing the first rule is quite simple:

$( 'a[href^=/]' ).click(function(event){
  $( '#content' ).load( $( this ).attr( 'href' ) );
  return false; // similar to call event.preventDefault(); and event.stopPropagation();
});

Implementing the second rule is also easy, simply modify the previous example:

$( 'a[href^=/]' ).live( 'click', function(event){
  $( '#content' ).load( $( this ).attr( 'href' ) );
  event.preventDefault(); // canceling the default action, but leave bubbling as it is - not to interfere with other handlers
});

Supported events: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change, submit, focusin, focusout, mouseenter, mouseleave.

Not supported: blur, focus, change, submit.

Opposite to the function live is function die - it disables event tracking for newly listed elements.

Now, I would also like to explain how the method live operates - this method works due to so-called "surfacing" of events in DOM - i.e. when you click on any element on the page, in the first place an event is triggered for this element, if the event handler is absent, or it does not say that there is no need to surface (this can be expressed as follows event.stopPropagation()), then the event goes up the list in the DOM tree and triggers handlers of the parent element, and so on until it reaches the root - "document". Thus the method live assigns events for document, and then analyzes every event for the presence of the elements assigned by you. This is definitely not the fastest way, but you can make it faster by using the method delegate, it is different from live because you specify the element for which you assign the event handler "live", so the example given above can be transformed as follows:

$( '#content' ).delegate( 'a[href^=/]', 'click', function(event){
  $( '#content' ).load( $( this ).attr( 'href' ) );
  event.preventDefault();
});

Touch events

Smartphones with large touch screen - are quite common these days, so web-industry starts to adapt to the users of iPhone, and if you need such adaptation, you will find the following information useful:

Events in JavaScript:

  • touchstart - similar to mousedown;
  • touchmove - mousemove;
  • touchend - mouseup;
  • touchcancel - no similar command.

But let's go back to CSS, and in order to connect an external CSS file to iPhone you'll need something that looks like this:

<link rel="stylesheet" href="iphone.css" type='text/css' media='only screen and (max-device-width: 360px)' />

Or in the CSS itself:

@media only screen and (max-device-width: 360px) {
  .sidebar {
    display: none;
  }
}

 

Read also

jQuery for beginners: selectors

jQuery for beginners: selectors

jQuery for beginners: AJAX

jQuery for beginners: AJAX

jQuery for JavaScript

jQuery for JavaScript

jQuery UI. Widgets. Dialog (Windows)

jQuery UI. Widgets. Dialog (Windows)

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation