objects, events, and inheritance

[krycek]

I have a widget that I have made, which is a custom scroll box. Basically, it consists of a layer and a scrollbar. I have added an onMouseWheel() event to it so that I can scroll the layer with my mouse wheel, without having to use the scrollbar - just like if you have your mouse over an IE window :)

The desired effect is for the function to be called whenever the mouse wheel is turned and the mouse is over the layer. However, I do not want to manually calculate the position of the mouse in respect to the layer, because I have purposefully stayed away from that, instead using the event.srcElement property.

What actually happens at the moment is that the layer scrolls fine - providing there is nothing "in the way". Now, if I have two layers and one is partly obscuring the one I want to scroll, then this is not a problem. In fact, it is desired behaviour. The problem is with the scrolling layer's children.

I want the layer to scroll if the mouse is over the scrolling layer or it's children, if you see what I mean. The layer will be clipped so none of it's children will be outside of the parent (well, at least not to our intents and purposes here).

I am pretty sure that what I am looking for is to do with event bubbling and the inheritance of the layers/objects. As far as I can tell, a mouseover event on a child should also trigger the mouseover event of the parent, is that correct? Assuming here that cancelBubble has not been used.

I have three levels of mouse handling (a global mouse handler, individual mouse handlers, and a default action - called in that order) which somewhere along the line may be cancelling the event - but before I look through every line looking for something which may not be there, I would like to know if I am on the right track! :D

Any thoughts on this...?

::] krycek [::

[jkd]

There are 2 different ways events propagate basically:

1. Capture. The is the first step for an event. It goes from document, to document.documentElement, and continues traversing the DOM tree until event.target is reached.
Event capturing is defined in the DOM2 Events specification (which only Mozilla and NS6+ support btw).

2. Bubble. Once the event is at the target, it propagates outward, traveling exactly oppose the way it did when capturing. event.target --> event.target.parentNode --> .... --> document.documentElement --> document

Not all events bubble. IE supports it own form of bubbling, while Mozilla/NS6+ support event bubbling as defined by the DOM2 Events specs. The concept is the same in both cases though.

[krycek]

As far as I understand, capturing is simply the opposite of bubbling, and Netscape = capturing while IE = bubbling...? That was always my impression. It seems that DOM 2 supports both somehow :)

I guess that what you have said is basically confirming that I am on the right track...? i.e. from my description, is it event bubbling I should be looking at...?

::] krycek [::

[jkd]

Netscape follows the specs. Which means the event first captures, is at rest for a moment, and bubbles back up.

IE only bubbles, which is incorrect.