What is the difference between Event.target and Event.currentTarget in JavaScript?

Event.target:

A reference to the object that dispatched the event and can be used in order to implement event delegation.

Syntax-

theTarget = event.target

Example-

The event.target property can be used in order to implement event delegation.

// Assuming there is a 'list' variable containing an instance of an HTML ul element.
function hide(e) {
// Unless list items are separated by a margin, e.target should be different than e.currentTarget
e.target.style.visibility = 'hidden';
}

list.addEventListener('click', hide, false);

// If some element (<li> element or a link within an <li> element for instance) is clicked, it will disappear.
// It only requires a single listener to do that

Event.currentTarget:

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

Syntax-

theTarget = event.currentTarget

Example-
event.currentTarget is interesting to use when attaching the same event handler to several elements.

function hide(e){
e.currentTarget.style.visibility = "hidden";
// When this function is used as an event handler: this === e.currentTarget
}

var ps = document.getElementsByTagName('p');

for(var i = 0; i < ps.length; i++){
ps[i].addEventListener('click', hide, false);
}

// click around and make paragraphs disappear

For more info please visit-

https://developer.mozilla.org/en-US/docs/Web/API/event.currentTarget

https://developer.mozilla.org/en-US/docs/Web/API/event.target

Programming is Easy…

Advertisements

What is Event delegation in JavaScript ?

It is a one of the most important JavaScript pattern to simplify event handling by smart use of bubbling.

Concept-

If there are many element inside one parent, and you want to handle events on them – don’t bind handlers to each element. Instead, bind the single handler to their parent, and get the child from event.target property.

Event delegation allows to graciously handle trees and nested menus.

<ul id="menu">
<li><a class="button" href="/php">PHP</a></li>
<li><a class="button" href="/html">HTML</a></li>
<li><a class="button" href="/javascript">JavaScript</a></li>
<li><a class="button" href="/flash">Flash</a></li>
</ul>
<ul id="menu">
<li><a class="button" href="/php">PHP</a>
<ul>
<li><a href="/php/manual">Manual</a></li>
<li><a href="/php/snippets">Snippets</a></li>
</ul>
</li>
<li><a class="button" href="/html">HTML</a>
<ul>
<li><a href="/html/information">Information</a></li>
<li><a href="/html/examples">Examples</a></li>
</ul>
</li>
</ul>

Below same js code will work for above both menus-

document.getElementById('menu').onclick = function(e) {
e = e || event
var target = e.target || e.srcElement
if (target.nodeName != 'A') return

var href = target.href
alert( href.substr(href.lastIndexOf('/')+1) )
return false // prevent url change
}
<div id="menu">
<button data-action="Save">Click to Save</button>
<button data-action="Load">Click to Load</button>
</div>

<script>
function Menu(elem) {
this.onSave = function() { alert('saving') }
this.onLoad = function() { alert('loading') }

var self = this

elem.onclick = function(e) {
var target = e && e.target || event.srcElement
var action = target.getAttribute('data-action')
if (action) {
self["on"+action]()
}
}
}

new Menu(document.getElementById('menu'))
</script>

Summary-
Event delegation is cool. It is one of the most useful JavaScript patterns.

The algorithm-
-Bind a handler to the container.
-In the handler: get event.target.
-If necessary, climb up the target.parentNode chain, until either the first suitable target is found (and handle it), or the container (this) is reached.

Benefits-
-Simplifies initialization, saves memory from extra handlers.
-Simplifies updates.
-Allows to use innerHTML without additional processing

Limits-
-First, an event should bubble in IE. Most of events do bubble, but not all of them. For other browsers, capturing phase is also suitable.
-Second, delegation in theory puts extra load on the browser, because the handler runs when an event happens anywhere inside the container. So, most of time the handler may do idle loops. Usually it’s not a big deal.

For more info-
http://javascript.info/tutorial/event-delegation#the-ba-gua-example

Programming is easy….

What is the difference between an event and a delegate?

An event is just a wrapper for a multicast delegate.
Adding a public event to a class is almost the same as adding a public multicast delegate field. In both cases, subscriber objects can register for notifications, and in both cases the publisher object can send notifications to the subscribers. However, a public multicast delegate has the undesirable property that external objects can invoke the delegate, something we’d normally want to restrict to the publisher.
Hence events – an event adds public methods to the containing class to add and remove receivers, but does not make the invocation mechanism public.

ASP.NET Application Life Cycle Events and Global.asax

During the application life cycle, the application raises events that you can handle and calls particular methods that you can override. To handle application events or methods, we can create a file named Global.asax in the root directory of your application.

If we create a Global.asax file, ASP.NET compiles it into a class derived from the HttpApplication class, and then uses the derived class to represent the application.

ASP.NET automatically binds application events to handlers in the Global.asax file using the naming convention Application_event,  such as Application_BeginRequest.

The Application_Start and Application_End methods are special methods that do not represent HttpApplication events. ASP.NET calls them once for the lifetime of the application domain, not for each HttpApplication instance.

Below is the commonly used events and methods during the application life cycle :-

1)Application_Start :-  

Called when the first resource (such as a page) in an ASP.NET application is requested. The Application_Start method is called only one time during the life cycle of an application.

You can use this method to perform startup tasks such as loading data into the cache and initializing static values.You should set only static data during application start. Do not set any instance data because it will be available only to the first instance of theHttpApplication class that is created.

 

2) Application_event :-

Raised at the appropriate time in the application life cycle.
Application_Error can be raised at any phase in the application life cycle.
Application_EndRequest  is the only event that is guaranteed to be raised in every request, because a request can be short-circuited.

3)Init :- 

Called once for every instance of the HttpApplication class after all modules have been created.

4) Dispose:- 

Called before the application instance is destroyed. You can use this method to manually release any unmanaged resources. For more information, see Cleaning Up Unmanaged Resources.

5) Application_End :-

Called once per lifetime of the application before the application is unloaded.

 
Reference :- http://msdn.microsoft.com/en-us/library/ms178473(v=vs.100).aspx

 

Programming is Easy…..