473,385 Members | 2,274 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

.onmouseover=... syntax question re NN events

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
Jul 20 '05 #1
6 3922
had you considered using CSS to control your mouseovers? Then any css
standard supporting browser should render it correctly.

Greg.

Csaba2000 wrote:
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


Jul 20 '05 #2

"Greg" <ju******@greentreesoftwaresystems.com> wrote in message news:AFP8b.3245$Cu3.2455@edtnps84...
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.


Jul 20 '05 #3
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.

Csaba2000 wrote:
"Greg" <ju******@greentreesoftwaresystems.com> wrote in message news:AFP8b.3245$Cu3.2455@edtnps84...
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.



Jul 20 '05 #4
"Csaba2000" <ne**@CsabaGabor.com> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #5
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message news:u1**********@hotpop.com...
"Csaba2000" <ne**@CsabaGabor.com> writes: ....
I want to have something like:

...
var myTable = document.getElementById('myTable');
myTable.onmouseover = tableMoused;

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.


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
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 20 '05 #6
"Csaba2000" <ne**@CsabaGabor.com> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: steve | last post by:
Hi every one Can I have two or more onMouseOver events and how if yes. I have this image and I wan to add bowlf of this onMouseOver events how do I do it onMouseOver="return...
12
by: Epetruk | last post by:
Hi all, I want a page where the contents of a table cell are replaced with an image when the mouse moves over the cell, and the text is restored when the mouse moves out. Here's the html for the...
5
by: Ryan Moore | last post by:
I am trying to modify the onMouseOver attribute of a <td> cell created by a DataList... according to ...
5
by: Martin Chen | last post by:
I have a frame set (as per MS FrontPage 2000). It has a contents and a main frame. The contents frame has a menu bar written with with javascript (in the context of a table). In IE6.1 everything...
3
by: Rob Roberts | last post by:
I'm using .NET 2.0 and C# on a web site, and I'm trying to use the onmouseover and onmouseout events to do a rollover effect on an asp.net button. I've tried manually adding the events to the...
2
by: Steve Macleod | last post by:
Hi, I was wondering if anyone would be good enough to have a look at the following code and tell me if there is something im missing! drug_list is an array of drug details table is a reference to...
2
by: Daz | last post by:
Hi everyone. I think my problem is a simple one, but I am completely baffled as to how to pull it off. I have a piece of code like so... document.write( "<img id=\"slideshow_toggle\"...
3
by: equazcion | last post by:
Hi, I have an image reference (IMG) in my page that changes depending on the value of a database field. Clicking the image triggers an Ajax call to change the database field (toggles the field...
4
by: webgour | last post by:
Hello, I'm having difficulty using attachEvent instead of simply assigning to mouseover in my object Sample03. When i use myImage.onmouseover = this.showmouseover(); in the following all works...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.