.onmouseover=... syntax question re NN events

[Csaba2000]

How do I achieve the following in javascript, the
emphasis being on the NN (6.1) 'event' parameter that
needs to be declared?

This is the current method - works just fine:
<TABLE border id='myTable' onmouseover="tableMoused(event)">


But, because I may or may not want myTable subject to being "Moused",
I want to have something like:
<TABLE border id='myTable'>
<SCRIPT type="text/javascript">
function prepareForMousing() {
var myTable = document.getElementById('myTable');
myTable.onmouseover = tableMoused;
}
</SCRIPT>


where
function tableMoused(evt) {
var e = window.event || evt;
....
}


Now, all this is fine for IE (5.5), but can anyone explain how this is
supposed to be made proper for Netscape (and Opera)?
The point being, how can NN know that it should pass the
event object along as that first param?


Thanks,
Csaba Gabor from New York

 

[Greg]

had you considered using CSS to control your mouseovers? Then any css
standard supporting browser should render it correctly.

Greg.

 

[Csaba2000]

had you considered using CSS to control your mouseovers? Then any css
standard supporting browser should render it correctly.

Huh, what? Perhaps you could clarify your comments.

I don't want to control mouseover events. I just want
to receive proper notification of them.

Although I've had rendering issues in the past (which I
would happily discuss further), this is not a post about
rendering. (But if it were, I would add that so far I have
not seen much evidence that browser support of CSS
cursors is hale).

Csaba Gabor

 

[Greg]

I'm sorry, I misread your post.

I'm not sure I'm knowledgeable enough with javascript to make
intelligent suggestions regarding capturing mouseover events.

I thought you were trying to affect how parts of your table displayed
when it was moused over, which I believe you could accomplish with

(in the css file you could have entries like)
..myclass {background: white}
..myclass:hover {background: blue}

(in the html you could have a t
<table name=myname class=myclass>

Sorry if I missed the boat.

Greg.

 

[Lasse Reichstein Nielsen]

I want to have something like: ....
var myTable = document.getElementById('myTable');
myTable.onmouseover = tableMoused;

where
function tableMoused(evt) {
var e = window.event || evt;

I always write this as:

evt = evt || window.event; // IE sucks

(yes, always with the comment

Now, all this is fine for IE (5.5), but can anyone explain how this is
supposed to be made proper for Netscape (and Opera)?

Have you tested it? I would guess that it works.

The point being, how can NN know that it should pass the event
object along as that first param?

There is nothing to know, it always does that.
Except for IE, browsers call the on<event> handlers with the event
object as the first (and only) argument.

/L

 

[Csaba2000]

There is nothing to know, it always does that.
Except for IE, browsers call the on<event> handlers with the event
object as the first (and only) argument.

Hi Lasse, thanks for your response. OK, I've got it working now.
But about your last comment, it wasn't clear to me.

For example, in the following element declaration, would we not
call myResponse the event handler, which takes three arguments?
<BUTTON onClick="myResponse('frob', event, this)">Click me</button>


Here is how I have gotten the same fragment to work with dynamic
event handler assignment:

<BUTTON>Click me</BUTTON>
<SCRIPT type="text/javascript">
//onClick="myResponse('frob', event, this)"
myButton = document.getElementsByTagName('BUTTON')[0]
myButton.onclick=function (event) {myResponse('frob', event, this)}
function myResponse (foo, evt, src) {
alert ("dummy arg: " + foo + "\r\npageX: " +
evt.pageX + "\r\ntype: " +
src.type + "\r\nargLen: " +
arguments.length + "\r\nthis: " +
(!this?"undefined":this.nodeName));
}
</SCRIPT>

[Terminology question] What, exactly, is the event handler here?
Is it myResponse or is it the intermediate step specified in the
onclick line? In the latter, your comment about a single event
argument is born out. Interestingly >this< is known about in the
onclick line (though it's not an argument), but it is not known
about in myResponse.

Regards,
Csaba

 

[Lasse Reichstein Nielsen]

But about your last comment, it wasn't clear to me.

For example, in the following element declaration, would we not
call myResponse the event handler, which takes three arguments?
<BUTTON onClick="myResponse('frob', event, this)">Click me</button>

Yes it would.

There is a significant difference between, e.g., the HTML attribute
"onclick" and the Javascript element property "onclick".

You can assign a function directly to the element:
document.getElementById("foo").onclick = function(event) {...};

This is a completely normal Javascript function, and it will be called
as a method of the element with id="foo".

What you write is an HTML attribute. The attribute value is converted
to a function and assigned to the element's property. The body
of this function is the code you wrote, but it is executed in a
scope where the properties of the document, form and form-element
elements are visible.

If you write
<button id="foo" onclick=" ... some Javascript ..."> ...</button>
then the onclick property of the corresponding element is creatated
as (something like, but not exactly):

var elem = document.getElementById('foo');
with (document) {
with (elem.form) { // if any
with (elem) {
elem.onclick = Function("event","... some Javascript ...");
}
}
}

Except in IE, the "event" is not an argument of the function, but
a global variable instead. This becomes visible if you add, e.g.,
a property called "event" to the document object.

So, the text in an HTML onclick attribute becomes the body of the
actual event handler function. The function called from it,
"myResponse", is not the event handler.

myButton.onclick=function (event) {myResponse('frob', event, this)} ....
[Terminology question] What, exactly, is the event handler here?

I would say that it is the function you assign to the "onclick"
property. It is the function that is called to handle the click event.

Is it myResponse or is it the intermediate step specified in the
onclick line?

I.e., the latter. The function "myResponse" is just another Javascript
function, which just happens to be called from an event handler.

In the latter, your comment about a single event
argument is born out. Interestingly >this< is known about in the
onclick line (though it's not an argument),

"this" is never an argument, since it is not a legal variable name. It
is a keyword.

The handler function, assigned to the onclick property (possibly via
an HTML attribute), is called as a method of the element it belongs to.
That means that inside the body of the function, the keyword "this" refers
to the element.

The function "myResponse" is called as a global function. That means
that inside its body, the this keyword should refer to the global
object.

but it is not known about in myResponse.

It should point to the global object (which can also be referred to as
"window" or "self"). Since the window object doesn't have a nodeName
property, "this.nodeName" is undefined (which is transformed to a string
to become "undefined").

/L