onkeydown event on document element

[b.dam]

I'm trying the following:

function grid() {
this._el = document.createElement("TABLE");

var self = this;
document.addEventListener("onkeydown", function(event)
{self.gridKeyDown(event);}, false);
}

grid.prototype.gridKeyDown = function(event) {
//some code
}

var datagrid = new grid();


the addEventListener doesn't get added, the gridKeyDown method never
gets executed. Can I add onkeydown to the document object? Is there a
good reference about mozilla dom?

 

[Random]

I'm trying the following:

function grid() {
this._el = document.createElement("TABLE");

var self = this;
document.addEventListener("onkeydown", function(event)
{self.gridKeyDown(event);}, false);
}

grid.prototype.gridKeyDown = function(event) {
//some code
}

var datagrid = new grid();


the addEventListener doesn't get added, the gridKeyDown method never
gets executed. Can I add onkeydown to the document object? Is there a
good reference about mozilla dom?

Other discussions are currently going regarding event handling and how
to dynamically cause it.

The simplest way to do it is also the most cross-compatible:

document.onkeydown = function ( event ) {
event = event || window.event;
// figure out which of your grid objects it applies to
// then fire your gridKeyDown function thereon
myGrid.gridKeyDown( event );
}


// the constructor
function grid( ) {
this._el = document.createElement("TABLE");
return this;
}

// note that you need to define the prototype before you may
// change it
grid.prototype = {
gridKeyDown: function (event) {
//some code
}
}

var datagrid = new grid();

---------

You do not need to attach the onKeyDown handler every time you create a
grid because the handler will be handling keyDown events for the entire
document, not for each individual grid object.

var self = this;
document.addEventListener("onkeydown", function(event)
{self.gridKeyDown(event);}, false);

If you do it this way, self will not be defined by the time onkeydown
handler is called, because onkeydown will be called outside of the
scope of the grid object constructor -- which is the desired behavior.

 

[VK]

addEventListener("k­eydown", ...

All event names in addEventListener are w/o "on", but obj.onkeydown
(with "on").
Obviously some English grammar lover (and end-developers hatter) is
working in the Mozilla team

"self" is a window property reffering to the current window.
So
var self = this;
equal to
var windows.self = windows.self;
which is wrong and pointless.

Make these changes and come back ;-)

 

[Random]

If you do it this way, self will not be defined by the time onkeydown
handler is called, because onkeydown will be called outside of the
scope of the grid object constructor -- which is the desired behavior.

When he should have written:

If you do it this way, self will not be defined as you expect by the
time onkeydown handlers is called, because onkeydown will be called
outside of the scope of the grid object constructor -- which is the
desired behavior. Instead, self [as VK pointed out] will be a
reference to the current window.

 

[b.dam]

Thanks for the replies.

I agree that the 'var self = this' seems a little pointless, but it
works, in both IE and mozilla. Try it for yourself.
Anyway, I agree with Random that his example is the most simple.
Problem with this is that I need to keep track of all my grids in a
global array or something, ugly. I solve cross-browser issues with this
mozilla only function:

HTMLElement.prototype.attachEvent = function(sType, fHandler) {
sType = sType.replace("on", "");
this.addEventListener(sType, fHandler, false);
}

Now I can use attachEvent on IE and mozilla. This doesn't work on the
document element however, and document.prototype isn't allowed. My
javascript console sais: "document.prototype has no properties". Any
suggestions?

 

[b.dam]

Never mind, I needed to use Document.prototype, with a capital D

I've got it working now, tnx!

 

[Random]

Thanks for the replies.

I agree that the 'var self = this' seems a little pointless, but it
works, in both IE and mozilla. Try it for yourself.
Anyway, I agree with Random that his example is the most simple.
Problem with this is that I need to keep track of all my grids in a
global array or something, ugly. I solve cross-browser issues with this
mozilla only function:

HTMLElement.prototype.attachEvent = function(sType, fHandler) {
sType = sType.replace("on", "");
this.addEventListener(sType, fHandler, false);
}

Now I can use attachEvent on IE and mozilla. This doesn't work on the
document element however, and document.prototype isn't allowed. My
javascript console sais: "document.prototype has no properties". Any
suggestions?

I don't believe the document object has a prototype. Did you plan on
creating new document objects inside the current window, without
replacing the current document? If not, such a prototype would be
useless anyway.

Try this, if you're intent on using attachEvent emulation:
document.attachEvent = HTMLElement.prototype.attachEvent;

 

[Random]

Never mind, I needed to use Document.prototype, with a capital D

I've got it working now, tnx!

....

nevermind, then.

Document, huh...

ideas...

 

[Richard Cornford]

If you do it this way, self will not be defined by the
time onkeydown handler is called, because onkeydown will
be called outside of the scope of the grid object
constructor -- which is the desired behavior.

When he should have written:

If you do it this way, self will not be defined as you
expect by the time onkeydown handlers is called, because
onkeydown will be called outside of the scope of the grid
object constructor -- which is the desired behavior.
Instead, self [as VK pointed out] will be a reference to
the current window.

Don't pay any attention to what VK says. He has a conception of
javascript and browser scripting that differs considerably form reality.
Instead read:-

<URL: http://jibbering.com/faq/faq_notes/closures.html >

- and find out what it means to be using a lexically scoped functional
programming language.

Richard.

 

[Thomas 'PointedEars' Lahn]

Never mind, I needed to use Document.prototype, with a capital D

This only works, i.e. does not result in a script error, if there is
a Document constructor, AFAIK by default restricted to the Gecko DOM.


PointedEars

 

[Thomas 'PointedEars' Lahn]

[...]
"self" is a window property reffering to the current window.

Correct so far.

So
var self = this;
equal to
var windows.self = windows.self;
which is wrong and pointless.

This is utter nonsense.

1. The global object in most HTML UAs is the object referred to by
its `window', not `windows', property.

2. The identifier in a VariableDeclaration expression is not subject
to scope chain resolution. Instead, the variable object of the
respective execution context is added a new property if there is
not already one with that name. `var self' does not mean
`var window.self' but rather

if (!hasProperty(referenceToVariableObject, "self"))
{
referenceToVariableObject.self = undefined';
}

3. A globally declared variable with identifier `self' somewhat extends
the scope chain so that it takes precedence over the `self' property
of the global object that the `window' property *probably* refers to
on lookup, i.e. on scope chain resolution, and, since it cannot be
undeclared, making a previously defined `self' property of the global
object inaccessible until reload.[1]

(Thus I prefer `_global' as identifier for the global object reference
rather than `self').

4. The `this' reference is only equal to `window.self' iff[2] both refer
to the variable object of the common (execution) context. In a common
Web browser (which is the AOM environment required for a `window.self'
property to refer to the global object) this would apply iff the
`self' variable would be declared in global context.

You probably want to read and understand ECMAScript Edition 3,
especially chapter 10, before uttering further comments on the subject.


PointedEars
___________
[1] At least this applies to JavaScript 1.5 in Gecko-based browsers.
However, AIUI ECMAScript 3, section 10.1.3, states that globally
declared variables with identifiers ("names") of already defined
properties of the global object (which is the variable object
here) must not change the value of that property. Yet it does
in the mentioned environment. Did I miss something?

[2] if, and only if