event handling

mehdi_mousavi · Mar 15, 2006

Hi folks,
Consider this html snippet:

<form name='myForm'>
<input type='button' value='go' name='myButton'>
</form>

I need to handle the onclick event of myButton control in javascript.
However, this has to be done without adding the onclick event to the
input tag above. I know there's a notation that lets me do this,
something like this:

<script>
myForm.myButton.onclick = function()
{
alert('this is executed if the user presses mybutton.');
}
</script>

but I cannot remember it exactly. Moreover, I would like to know if
this is W3C compliant.

Any help would be highly appreciated,

Cheers.
Mehdi

Gérard Talbot · Mar 15, 2006

mehdi_mousavi wrote :

Hi folks,
Consider this html snippet:

<form name='myForm'>

action is a required attribute

http://www.w3.org/TR/html401/interact/forms.html#edef-FORM

<input type='button' value='go' name='myButton'>

</form>

I need to handle the onclick event of myButton control in javascript.
However, this has to be done without adding the onclick event to the
input tag above. I know there's a notation that lets me do this,
something like this:

<script>

type is required:
http://www.w3.org/TR/html401/interact/scripts.html#edef-SCRIPT

myForm.myButton.onclick = function()

You can not get a scriptable access to a document element with its name
attribute; at least, not the way you do this. Your code is IE-specific.
How to get scripting access to that button?

All is explained here:

Accessing Elements with the W3C DOM
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

You can do this with
document.forms["myForm"].myButton.onclick = function () {...};

or

document.forms["myForm"].elements["myButton"].onclick = function () {...};

{
alert('this is executed if the user presses mybutton.');
}
</script>

but I cannot remember it exactly. Moreover, I would like to know if
this is W3C compliant.

If you want to make your code entirely DOM 2 compliant, you can register
an event listener on that button.

....
<script type="text/javascript">
function init()
{
if(document.addEventListener) // DOM 2 Events compliant
{
document.forms["myForm"].elements["myButton"].addEventListener("click",
ButtonClicked, false);
}
else if(window.event)
{
document.forms["myForm"].elements["myButton"].onclick = ButtonClicked;
};
}

function ButtonClicked(evt)
{
alert("this is executed if the user presses mybutton.");
}
</script>
....
</head>
<body onload="init();">
....

More on all this:
Using Web Standards in Your Web Pages
http://www.mozilla.org/docs/web-developer/upgrade_2.html

Working With Events
http://www.scottandrew.com/weblog/articles/events

Gérard

Michael Winter · Mar 15, 2006

On 15/03/2006 16:22, Gérard Talbot wrote:

[snip]

Accessing Elements with the W3C DOM
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

You can do this with
document.forms["myForm"].myButton.onclick = function () {...};

To describe that short cut as a 'W3C web standards replacement' is wrong
(though functionally, it's well-supported). Only the latter:

document.forms["myForm"].elements["myButton"].onclick = function () {...};

is specified by the W3C HTML DOM.

[snip]

else if(window.event)
{
document.forms["myForm"].elements["myButton"].onclick = ButtonClicked;
};
}

What does a global event property have to do with assigning a function
reference to an onclick property? There is no need to feature-test.

[snip]

Mike

Gérard Talbot · Mar 15, 2006

Michael Winter wrote :

On 15/03/2006 16:22, Gérard Talbot wrote:

[snip]

Accessing Elements with the W3C DOM
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

You can do this with
document.forms["myForm"].myButton.onclick = function () {...};

Click to expand...

To describe that short cut as a 'W3C web standards replacement' is wrong

Well, then, what is it?

Gérard

Michael Winter · Mar 15, 2006

Michael Winter wrote :

On 15/03/2006 16:22, Gérard Talbot wrote:

Click to expand...

[snip]

document.forms["myForm"].myButton.onclick = function () {...};

Click to expand...

To describe that short cut as a 'W3C web standards replacement' is wrong

Click to expand...

Well, then, what is it?

A well-supported, but non-standard, mechanism. The second form - using
the elements collection - is preferred (by me, at least) and the only
one that could be described as standardized.

Mike

Thomas 'PointedEars' Lahn · Mar 16, 2006

Michael said:
Accessing Elements with the W3C DOM
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

You can do this with
document.forms["myForm"].myButton.onclick = function () {...};

Click to expand...

To describe that short cut as a 'W3C web standards replacement' is wrong
(though functionally, it's well-supported). Only the latter:

document.forms["myForm"].elements["myButton"].onclick = function ()

Click to expand...

{...};

is specified by the W3C HTML DOM.

No, it is not. `onclick' is a proprietary property; to be standards
compliant, you have to use EventTarget::addEventListener(). The latter
line is only less proprietary than the former.

[snip]

else if(window.event)
{
document.forms["myForm"].elements["myButton"].onclick = ButtonClicked;
};
}

Click to expand...

What does a global event property have to do with assigning a function
reference to an onclick property? There is no need to feature-test.

With `onclick', there is. However, the feature test here is
ill-conceived, because it is not tested what is used later.

PointedEars

Michael Winter · Mar 16, 2006

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[snip]

document.forms["myForm"].elements["myButton"].onclick
= function () {...};

Click to expand...

is specified by the W3C HTML DOM.

Click to expand...

No, it is not. `onclick' is a proprietary property; [...]

I would have hoped that from what I quoted - particularly the first line
of that quote - it would be clear that my comment above was directed
toward the approach taken to access the element, rather than the
addition of an event listener.

[snip]

Mike

Content-Security-Policy: where to place JavaScript	2	Dec 2, 2025
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
Song requests	4	Aug 15, 2023
Where is the Javascript "trigger"?	7	Dec 16, 2024
Reversing output of user input by using while loop...	2	Sep 1, 2022
Event handling in IE?	3	Apr 28, 2004
Anomaly: onblur handling AND advice on validation	1	Jan 29, 2008
Registration Form	7	Aug 30, 2023

event handling

mehdi_mousavi

Gérard Talbot

Michael Winter

Gérard Talbot

Michael Winter

Thomas 'PointedEars' Lahn

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads