event object

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

programAngel

Hi,

I have recently read an old (not updated) book about javascript.

In the book that talk about the ability of the father object to capture the event of the sun and to detect it.

They used in the object event and event.srcElement.type and event.srcElement.name, I tried and it worked for me.

When I searched in google for this, I could not find a direct information about this type of object but more about surround topics like events in Javascript in general.

Can someone know about good source in the internet that explain about the event object and srcElement etc etc

007Julien

See, at first, this pages from Peter-Paul Koch about events...

aj_nsc

Here's an example:

<div id="parent">

  <div id="child">
     <a href="#" id="anchor1">Click Me</a>
  </div>

  <div id="sibling">
     <a href="#" id="anchor2">Click Me</a>
  </div>

</div>

Look at the hierarchy of this snippet, it looks kind of like this

				parent
	   /				     \
	child					sibling
	|					|
	anchor1					anchor2

Whenever an event (like a click, focus, hover) happens in JavaScript, the event object that occurs tries to get to the top of the hierarchy. If I was to mouseover anchor1, then, child and parent would also receive the mouseover event object because it would 'bubble up' the tree.

If I was to mouseover anchor2, sibling and parent (and anything above them) would also receive the event object.

You can stop an event object from bubbling up the tree using certain methods like returning false in a callback or using the .stopPropagation() method (https://developer.mozilla.org/en/DOM/event.stopPropagation) which, quite literally, stops the event from propagating up the tree.

Hopefully that sheds some light on it for you. Great question by the way, it's great to know how DOM events actually work - makes trouble shooting a lot easier than if you just started using them without understanding them.