The mothod "on" not available for a button?!

[K Viltersten]

It's perhaps something elementary. I tried
to do suff as follows.

document.getElementById ('Button1').on (
'click', funcion () {});

For some reason, the method isn't there. According
to FireBug i get this.

document.getElementById ('Button1').on
(gives nothing - no such method)

while

Ext.get ('Button1').on
(gives function ())

What do i miss?

 

[Robin Rattay]

It's perhaps something elementary. I tried
to do suff as follows.

document.getElementById ('Button1').on (
'click', funcion () {});

For some reason, the method isn't there. According
to FireBug i get this.

Because there isn't such a method.

document.getElementById ('Button1').on
(gives nothing - no such method)

Right. document.getElementById returns a DOM reference, and the DOM
API doesn't have a method "on".

Ext.get ('Button1').on
(gives function ())

Ext.get is a method of a 3rd party libary (I'm guessing "Ext" that
returns something else than a DOM reference which does have an "on"
method.

I'd suggest as a JavaScript beginner, you should avoid using 3rd party
libraries until you know what you're doing, or at least read their
documentation.

With the DOM API events are set either directly:

document.getElementById('Button1').onclick = function() { ... }

or with addEventListener:

document.getElementById('Button1').addEventListener("click",
function() { ... }, true);

Which IE however doesn't support. You need to use attachEvent for IE.
More details at: http://developer.mozilla.org/en/docs/DOM:element.addEventListener

Robin

 

[Henry]

It's perhaps something elementary. I tried
to do suff as follows.

document.getElementById ('Button1').on (
'click', funcion () {});

For some reason, the method isn't there. According
to FireBug i get this.

document.getElementById ('Button1').on
(gives nothing - no such method)

while

Ext.get ('Button1').on
(gives function ())

What do i miss?

That - document.getElementById - returns an element from the DOM and -
Ext.get -(whatever that is) either returns a different sort of object
or returns a DOM element that has been subject to (direct or indirect)
augmentation prior to being returned.

Neither the W3C DOM specifications nor historical practice suggest
that an element should be expected to have an - on - method.

 

[Thomas 'PointedEars' Lahn]

With the DOM API events are set either directly:

document.getElementById('Button1').onclick = function() { ... }

or with addEventListener:

document.getElementById('Button1').addEventListener("click",
function() { ... }, true);

Reference Worms[tm] are error-prone, and should therefore be avoided.

// add feature tests here

var o = document.getElementById('Button1');
if (o)
{
// add feature tests here

o.addEventListener("click", function() { ... }, true)
}

Adding a capturing event listener (`true') through the standards-compliant
addEventListener() method of the EventTarget interface is _not_ equivalent
to assigning to the proprietary event handler property (`on...').
Therefore, the third argument should be `false' unless compatibility with
non-DOM2 UAs is not an issue (seldom).

Which IE however doesn't support. You need to use attachEvent for IE.

However, IE/MSHTML does support the proprietary event handler property,
which should to be used instead of attachEvent():

http://www.quirksmode.org/blog/archives/2005/08/addevent_consid.html


PointedEars

 

[K Viltersten]

It's perhaps something elementary. I tried

Because there isn't such a method.


Right. document.getElementById returns a DOM reference, and the DOM
API doesn't have a method "on".


Ext.get is a method of a 3rd party libary (I'm guessing "Ext" that
returns something else than a DOM reference which does have an "on"
method.

I'd suggest as a JavaScript beginner, you should avoid using 3rd party
libraries until you know what you're doing, or at least read their
documentation.

With the DOM API events are set either directly:

document.getElementById('Button1').onclick = function() { ... }

or with addEventListener:

document.getElementById('Button1').addEventListener("click",
function() { ... }, true);

Which IE however doesn't support. You need to use attachEvent for IE.
More details at:
http://developer.mozilla.org/en/docs/DOM:element.addEventListener

Thanks for the head up regarding IE. Also, thanks for the
very insightful reply.

 

[Thomas 'PointedEars' Lahn]

That - document.getElementById - returns an element from the DOM and -
Ext.get -(whatever that is) either returns a different sort of object
or returns a DOM element that has been subject to (direct or indirect)
augmentation prior to being returned.

And it should also be noted again that direct augmentation is inherently
error-prone as host objects may implement their own internal [[Put]]
algorithm allowed per the ECMAScript Specification. And so it can be
observed that often code written by clueless/inexperienced people directly
augments host objects, they not being aware that their code may break any
minute.


PointedEars

 

[Stevo]

document.getElementById('Button1').addEventListener("click",

Reference Worms[tm] are error-prone, and should therefore be avoided.

PointedEars

Reference worms. I like it. Did you make that up ? I've always wanted a
term to describe what that code above is doing (incorrectly assuming
that Button1 will be returned as an object and disregarding the
possibility that it might return null / undefined).