Subscribe via RSS Feed

Angular.js Event Handling

June 10, 2014 4 Comments

It is event handlers that make everything move and change. They help attach functions to the objects to change their properties, to make them respond to user actions, etc. To run any script when the event triggers on a certain page element, we need to attach event handler to this page element by calling an attachEvent();
The syntax is:

$$("element_id").attachEvent("onSomeEvent", some_function(){...});

Event names are case-insensitive. Angular JS offer a number of directives to catch on-page events (ngClick, ngChange, ngKeyPress, ngMouseMove) and all of them can be successfully used in Angular integrated applications.

<button ng-click="changeLine('line')">Show Line Chart</button> 

Common events for all UI components are mouse events (onItemClick, onBeforeContxtMenu, onMouseMoving, onMouseOut, etc) since all the components can be clicked (and right-clicked) and respond to a mouse pointer. Other inner events depend on the component functionality and are provided in API reference for each component.

Attaching Events to Components:
Handler can be attached to the components in different ways:
1 . Using any inner event of the component :

  • using attachEvent() method
  • using the component’s on property;

2 . Using special inner events (ready, init, mouse events):

  • using the component’s ready property;
  • via data scheme;
  • using specific component properties that attach some mouse events (onClick, onContext, onDblClick, onMouseMove).

Now let’s study each possibility in detail.

Using an attachEvent(); method:
An attachEvent() method takes the name of the component’s inner event and the function it fires (handler) as parameters.
A button to collapse the whole tree

var myEvent = $$("button_id").attachEvent("onItemClick", function(){
$$("dtree").closeAll();
})

Later on, we can easily detach this event from the component by using the opposite method with an event’s name as argument:

$$("button_id").detachEvent(my Event); 

Attaching a function among object literals during component initialization.
We can also define event handlers right in the component constructor:

  • on: {event ,function();} – specifies the function that fires when the stated event happens;
  • ready: function(); – specifies the function that fires when the page is completely parsed;

Attaching events in the data scheme:

  • Data scheme sets initial pattern for loaded data.
  • The function specified in its $init key will run each time when data is loaded/reloaded to the component and when the add method is called.
  • Using Specific Properties for Mouse Events

Such properties come in pairs and include:

  • onClick and on_click – active handlers for clicking;
  • onContext and on_context – active handlers for right-clicking;
  • onDblClick on_dblclick – active handlers for double-clicking;
  • onMouseMove and on_mouse_move – active handlers for setting a mouse pointer over the component (item).

Setting a Handler:
When attaching an event we can specify only the name of a handler and later on, provide its description outside the component constructor.

Events from one object to another:

If we have already attached an event to the component and described the function that this event triggers, we can attach this event to another component . For these needs, use the mapEvent method and pass a map into it, where the map is an event-object correspondence:

button.mapEvent({
    onItemClick:list // where list - some other component
});

As a result, when the button is clicked, the function that was initially attached only to it, will be executed for list as well. Event Mapping helps to get rid of repetitions in code when one and the same event should be attached to different components. Event Handling with Component Items. Inner events make it possible to work with component items provided that the ID of an item we click, select, etc. is passed to the attached function.

For instance, we need an event that fires each time we click an item in the list and performs an action that manipulates its data.

Keyboard Events:

  • Components that are in focus at the moment automatically receive the ability to respond to keyboard actions and can take keyboard events, namely
  • onKeyPress – to respond to keys specified by dedicated key codes;
  • onEditKeyPress – the same, but with an editor opened;
  • onTimedKeyPress – to trigger actions after typing has been finished.

Blockable Events:

  • Events can be divided into two groups:
  • Events that don’t affect the app’s work by their result;
  • Events that affect the app’s work depending with their result. If an event title contains the word “before”, the continuation of the current action depends on whether the function returns true or false.
  • The function returns false, selection is blocked
$$("my_list").attachEvent("onBeforeSelect", function(){ return false; })

We can also temporarily block all events associated with the component by using the blockEvent() method. To re-enable event triggering use the unblockEvent() method.

$$("component_id").blockEvent();
 $$("component_id").unblockEvent();

Event Handling with HTML nodes. Handling of native DOM events
Alongside with components and their items events can be as well attached to HTML nodes. Here event(); and eventRemove() functions are used:
Event handling concerns both JavaScript and HTML buttons while the syntax of attaching slightly differs.

HTML button

<input type='button' class="sample_button" value='Close' onclick='close_tree()'> 

JS button

{ view:"button", id:"sample_button", value:"Close", width:100, click:"close_tree"}

The custom function close_tree() is defined separately.

function close_tree(params){....}; 

Delayed Events
The default value for res ponce on events is 500ms. With such events as onMouseMove and onMouseOut we can delay the response on as such milliseconds as we like.

Related Links:
1>Directive in Angular.js – Part 1
2>Directive in Angular.js – Part 2
3>Working with Modules in Angular.js
4>Angular Router and UI-Router
5>Angularjs and Services
6>Angular.js Promise
7>Angular.js Two Way Data Binding
8>How To Use Filter In Angular.js
9>Using Controllers in Angular.Js
10>Angularjs with Server Side Interaction
11>Working Through Angular.js With Transclude
12>Angular Templates

If you find this article helpful, you can connect us in Google+ and Twitter.