Custom Event in JavaScript

[Jezternz]

Okay.
I basicly want an event like
onElementClose
Basicly will trigger a function when another div/block/element comes within a certain area around it (say 5px for eg).

I am sure custom events are possible, I have seen strange examples around.
So unless you are 100% certain this is impossible, please dont say its impossible.

a setInterval that checks if there is an element around it every so long is not acceptable. as there will be hundreds of elements using this event.

If i havent explained this clearly enough please ask

Thanks, Josh.

[acoder]

How will the elements come close, i.e. will they be moved from their original position, or will new elements be created which could potentially come close to an already existing element?

[Jezternz]

moved from their origonal position, the elements will all be position: absolute.
So will be moved by an x and y axis using "left" and "top"

[acoder]

If you're YUI or Dojo, they have support for custom events, see, for example, YUI Custom Events. You might find this article useful too.

[rnd me]

use the mutation dom events

[Jezternz]

this looks complicated, thanks guys, ill have a read.

[Jezternz]

What d you mean by mutation events? also: I would prefer to avoid third party scripts/libraries if possible.
addEventListener <- I dont entirely understand what they mean about this function what exactly does it do? If anyone could help me with any of this, or even better start me off, would be mnuch apreciated.

cheers, Josh

[acoder]

What d you mean by mutation events?...
addEventListener <- I dont entirely understand what they mean about this function what exactly does it do?

Mutation events notify of changes to the document structure. However, these are not well supported. Firefox, Safari and Opera support some of them.

addEventListener is a more advanced event model method. Unfortunately, it's not supported by IE (as ever). Fortunately, IE has its own version. See this link for more information.

[Jezternz]

I read that, but I dont really see the difference between:

element.addEventListener('click',doSomething,false )
element.onclick = doSomething;

I understand eventlistener can be used multiple times, but apart from that are they exactly the same?

cheers Josh

[acoder]

Not quite, see Why use addEventListener?.

[Jezternz]

wait so if im understanding this correctly.
This wont bubble:
element.addEventListener('click',doSomething,false );
This will buble:
element.onclick = doSomething;

meaning the first one will only activate if it is clicked (and wont activate if its children are clicked, where the second one would)

Thanks again acoder, Josh

[acoder]

No, if you have false as the third argument, it will bubble. When it's true, it's in the capturing phase (parent fires first, then child). If you want to stop bubbling/capturing, use stopPropagation() (W3C) and cancelBubble=true (Microsoft). See this link for a good explanation of this concept.