Object Element Info by MouseEvent

[netfervor]

plz anybody helppppp me
I want to have script to grab information of object and viewed at "status bar"(or other) about all active element properties of object if mouse over it.
example:

object1 = <DIV ID="myDiv1" style="color:#CCCCCC"></DIV>

object2 = <input Type="Text" Name="myText1" Value="textValue1">

object3 = <img src="myImage.gif" width="149" height="173" border="0" alt="myImage">

If cursor on Object1, the status will show like :
ID="myDiv1" style="color:#CCCCCC"

If cursor on Object2 status will :
Name:"myText1" Value:"textValue1"

If cursor on Object3 status will :
Src="myImage.gif" width="149" height="173" border="0" alt="myImage"

the result is can be status or maybe alert, but the only conditional is : each object must not have any javascript statement/function, so i think is like "event listener" (correct me if wrong) and initialize on window.onload

Is that possible to make script for this ??? please help me

[jkd]

A quick example of adding the listener to your DIV using DOM2 Events (as implemented by Gecko - NS6, NS7, Mozilla, Beonex, K-meleon, and Galeon):

window.onload = function() {

function myListener(event) {
window.status = event.target.nodeName;
// do anything
}

document.getElementById('myDiv1').addEventListener('mouseover', myListener, false);
}

The 3rd argument in the addEventListener method represents useCapture, but since IE doesn't support capturing, I'm trying to make both events be pretty much identical crossbrowser.

As for IE, you will need to make use of proprietary methods:

window.onload = function() {
function myListener() {
window.status = window.event.srcElement.nodeName;
}

document.getElementById('myDiv1').attachEvent('onmouseover', myListener);
}


And combining them:

window.onload = function() {
function myListener(event) {
window.status = (event.target || event.srcElement).nodeName;
// do anything
}

var refToDiv = (document.getElementById || document.all)('myDiv1');

if (typeof document.implementation != 'undefined' && document.implementation.hasFeature('Events', '2.0'))
refToDiv.addEventListener('mouseover', myListener, false);
else if (typeof document.attachEvent != 'undefined')
refToDiv.attachEvent('onmouseover', myListener);
}

[jkd]

Also, since this deals with Event listners, I think I'll move this to the DOM Scripting forum.

(I'm trying to set a precedent of which threads are appropriate for it now, since you brought it up. )

[netfervor]

thanks JKD, I've try your code,

but i still not like what i need,
I need script that can grab/capture elements/attributes with out giving ID of that Object,
I just wondering to know, is that is possible or not ?
cause i think : if can make event listening for event handler action,....... so..... why can not identify from which object the event handler action come from ????? Or is that truly Impossible

[jkd]

Ok, try this on for size:

document.addEventListener('mouseover', function(event) { window.status = event.target.nodeName }, true);

Notice now that the status bar reflects the objects you are mousing over, in Gecko at least. The mouseover event is capturing down the document tree, and you are receiving that event as it passes through its first node on the way down to the target element (because useCapture is true).

Is that sort of along the lines you were talking about?

[netfervor]

THANKSSSSS jkd ...... that what i need.......

BTW,.. anybody...... plz tell me where i can get the good article about "event Bubble" ...!!!???

[jkd]

I don't know a link offhand, but I can quickly explain it:

In the DOM2 Events model, events "capture", then "bubble". When an event captures, it passes from the topmost node (document), down the target node. For example:

document --> document.body --> document.body.childNodes[3] --> document.body.childNodes[3].lastChild

If the target was document.body.childNodes[3].lastChild.

All the nodes in that chain have the event same event fired, IF useCapture was set to true.

Once capturing is done, the Event is AT_TARGET for a moment, then begins bubbling. Bubbling is the logical opposite of capturing:

document.body.childNodes[3].lastChild --> document.body.childNodes[3] --> document.body --> document

The event once again passes through those nodes, firing any listeners for the event with useCapture set to false.

Kind of understand?

In IE, events never capture, they only bubble (originate at the srcElement, and bubble upwards through the DOM).