can you add whole types of elements to addEventListener? if not, how else to achieve the efffect?

[Jake Barnes]

37 Signals has built some awesome software with some features I wish I
knew how to imitate. When I'm logged into my page
(http://lkrubner.backpackit.com/pub/337271) any item that I mouseOver
I'm offered the chance to delete or edit it.

I'm trying to figure out how that is done. It seems like either you can
all LI elements to an addEventListener kind of thing, or you do
something like this:

document.onmouseover= moveDeleteControls;

And then the function moveDeleteControls magically figures out the id
of the element being moused over, yes?

Anyone know which approach is possible?

[Jake Barnes]

OK, I figured it out. This is cool stuff. I did this:

document.onmouseover= moveDeleteControls;

and now as I move the mouseover the page, this shows me what element
the mouse is over:

function moveDeleteControls(e) {
var eventTargetRef = e.target;
var newId = eventTargetRef.id;
alert(newId);
}

Awesome. Easy enough to take out the alert() and do something useful
with that. Does anyone know if this is cross-browser?


Jake Barnes wrote:

37 Signals has built some awesome software with some features I wish I
knew how to imitate. When I'm logged into my page
(http://lkrubner.backpackit.com/pub/337271) any item that I mouseOver
I'm offered the chance to delete or edit it.

I'm trying to figure out how that is done. It seems like either you can
all LI elements to an addEventListener kind of thing, or you do
something like this:

document.onmouseover= moveDeleteControls;

And then the function moveDeleteControls magically figures out the id
of the element being moused over, yes?

Anyone know which approach is possible?

[RobG]

Jake Barnes wrote:

OK, I figured it out. This is cool stuff. I did this:

document.onmouseover= moveDeleteControls;

and now as I move the mouseover the page, this shows me what element
the mouse is over:

function moveDeleteControls(e) {
var eventTargetRef = e.target;
var newId = eventTargetRef.id;
alert(newId);
}

Awesome. Easy enough to take out the alert() and do something useful
with that. Does anyone know if this is cross-browser?

No, it's not - try it in IE. The following is:
function moveDeleteControls(e)
{
var e = e || window.event;
var eventTargetRef = e.target || e.srcElement;
document.getElementById('fred').innerHTML = eventTargetRef.nodeName
+ ((eventTargetRef.id)? ' ' + eventTargetRef.id:'');
}
Provided you have a div or span somewhere with an id of 'fred'.
Read about the different event models here (this is the first of several
pages, work through them all):

<URL:http://www.quirksmode.org/js/introevents.html>

--
Rob

[Thomas 'PointedEars' Lahn]

Jake Barnes wrote:

OK, I figured it out. This is cool stuff. I did this:

document.onmouseover= moveDeleteControls;

and now as I move the mouseover the page, this shows me what element
the mouse is over:

function moveDeleteControls(e) {
var eventTargetRef = e.target;
var newId = eventTargetRef.id;
alert(newId);
}

Awesome.
Eeek. It most definitely is not.
Easy enough to take out the alert() and do something useful
with that. Does anyone know if this is cross-browser?
It is not. For two reasons:

1. `onmouseover' is a proprietary property of the object referred to using
the proprietary `document' reference (where for the latter there is alas
no standards-compliant alternative). A browser (or any HTML user agent
for that matter) may or may not implement it, and it may or may not
implement it as if an assignment of a reference to a Function object
was considered the addition of an event listener in combination with
the removal of all other event listeners.

2. Passing an Event object reference to an event listener and exposing a
`target' property for this object referring the EventTarget object that
caused the event is an implementation of W3C DOM Level 2 Event's
EventListener, Event and EventTarget interfaces. These interfaces are
not implemented in the IE DOM (properly) (yet; hopefully IE7 will).
However, these interfaces apply only to document nodes, and the object
referred to with `document' refers to no such object. And the
`mouseover' event which is addressed by this approach "is valid for most
_elements_" only, where the object referred to by `document' usually
does not refer to an element object (but a HTMLDocument object).
Therefore, a UA may or may not implement as if either one did, and ISTM
it was standards compliant if it did not implement either.

That said, here is the (almost, see above) standards-compliant approach
that also takes IE's incomplete event DOM implementation into account
(watch for word wrap):

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
/**
* @author
* (C) 2003, 2004 Thomas Lahn &lt;ty******@PointedEars.de&gt;
* Distributed under the GNU GPL v2.
* @partof
* http://pointedears.de/scripts/types.js
* @optional string s
* String to be determined a method type, i.e. "object"
* in IE, "function" otherwise. The type must have been
* retrieved with the `typeof' operator, thus this method
* is applicable to unknown properties while
* @link{#isMethod()} is not. Note that this method
* may also return <code>true</code> if the value of
* the <code>typeof</code> operand is <code>null</code>; to
* be sure that the operand is a method reference, you have
* to && (AND)-combine the <code>isMethodType(...)</code>
* expression with the method reference identifier.
* @return type boolean
* <code>true</code> if <code>s</code> is a method type,
* <code>false</code> otherwise.
* @see #isMethod()
*/
function isMethodType(s)
{
return (s == "function" || s == "object");
}

/**
* Adds an event-handling function (event listener) for a
* DOM object as event target. The following methods are
* used (in order of preference):
*
* - addEventListener(...) method (W3C-DOM Level 2)
* - attachEvent(...) method (proprietary to MSIE 5+)
* - Assignment to event-handling property (MSIE 4+ and others)
*
* @author
* (C) 2004-2006 Thomas Lahn &lt;dh******@PointedEars.de&gt;
* @partof
* http://pointedears.de/scripts/dhtml.js
* @param o : DOMObject
* Reference to the DOM object.
* @param sEvent : string
* Required string to be used as event identifier.
* If the addEventListener(...) method is not available,
* `on' is used as its prefix to reference the respective
* proprietary event-handling property.
* @param fListener : Function
* Reference to the Function object that provides
* event-handling code. Use <code>null</code> to
* remove the event handler if, and only if, the
* proprietary event-handling property is available.
* @param bUseCapture : optional boolean
* Optional. If <code>true</code>, the argument indicates that
* the user wishes to initiate capture. Corresponds to the
* third parameter of the addEventListener(...) method, is
* ignored if that method is not supported by the DOM (object).
* @return type boolean
* <code>true</code> on success, <code>false</code> otherwise.
* Since addEventListener(...) returns no value and throws
* no exceptions (what a bad design!), it is considered to be
* successful always, while attachEvent(...) returns success
* or failure, and the new value of the proprietary
* event-handling property must match the assigned value for
* the method to be successful.
* @see
* dom2-events#Events-EventTarget-addEventListener,
* msdn#workshop/author/dhtml/reference/methods/attachevent.asp,
*/
function _addEventListener(o, sEvent, fListener, bUseCapture)
{
var result = false;

if (o && sEvent && isMethodType(typeof fListener))
{
if (isMethodType(typeof o.addEventListener))
{
o.addEventListener(sEvent, fListener, !!bUseCapture);
result = true;
}
else
{
if (isMethodType(typeof o.attachEvent))
{
result = o.attachEvent("on" + sEvent, fListener);
}

if (!result)
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

return result;
}

function moveDeleteControls(e)
{
if (!e && window.event)
{
e = window.event;
}

if (e)
{
var eventTargetRef = e.target || e.srcElement;
if (eventTargetRef)
{
newId = eventTargetRef.id;
// ...
}
}
}
</script>
</head>

<body onload="_addEventListener(document.body, 'mousemove',
moveDeleteControls, false);">
...
</body>
[top posting again]

Learn to quote. NOW.

<URL:http://jibbering.com/faq/faq_notes/pots1.html#ps1Post>
PointedEars