0

when javascript function is called by the DOM event, inside the function you have access to the event variable which represents the DOM event? How does it work behind the scene? since the function does not get the event argument, and we don't use the argusments object..

ciochPep
  • 2,472
  • 4
  • 26
  • 30
  • 1
    This is really only true in IE, which provides the `event` object as a property of the `window` object. Why? Because. – nnnnnn Feb 08 '13 at 09:10
  • 1
    There is a `window.event` which is set in case a event occured. @nnnnnn this is also true for non IE. However using this technique ist discouraged. – Christoph Feb 08 '13 at 09:11
  • Christoph, why it is discouraged? is there ahy other way to find out which event invoked the current call stack? – ciochPep Feb 08 '13 at 09:25
  • @ciochPep Using global objects generally is discouraged, because they (or at least many of them) can be manipulated, while a function parameter cannot. – Christoph Feb 08 '13 at 09:43
  • I see, is there any better way to do so? – ciochPep Feb 08 '13 at 09:47
  • This depends on what you are trying to do. By default, you can write `addEventListener("eventtype",function(e){})` where `e` is the event which gets handed over to the function automatically by the addEventListener function. – Christoph Feb 08 '13 at 09:50
  • Sorry, yes, `window.event` does work in _some_ other browsers but not all. – nnnnnn Feb 08 '13 at 10:31
  • @nnnnnn do you have any information in which browsers this works and in which not? I was searching, but could not find any useful data on this. – Christoph Feb 08 '13 at 12:04
  • @Christoph if my function signature has no arguments, can I still access the event via the arguments object? – ciochPep Feb 08 '13 at 12:34
  • @ciochPep sure, that's what the arguments object is for. Have a look at the [MDN Docu](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments) for more information. I will summarize this in an answer for you if you like. – Christoph Feb 08 '13 at 12:39
  • @Christoph - I don't have a definitive list. After reading your previous comment I tried it out for myself in Chrome and FF: it worked in Chrome and didn't work in FF. I believe even FF lets you refer to `event` directly within an inline event attribute (but not in functions called from the attribute unless you pass it as a parameter), but it didn't work within a function assigned via `addEventListener()` or `element.onclick = ...`. – nnnnnn Feb 08 '13 at 20:59

1 Answers1

0

A short summary for DOM Events:

the correct way to bind an Eventlistener is:

var elem = document.querySelector("div");

elem.addEventListener("event-type",function(e){ /*e is the event object*/ });

addEventListener() listenens for an event-type event on the DOM-Element elem.

addEventListener() always passes the event-object to the function as first parameter. You can either access this parameter by defining it in the function head (commonly named e)or via arguments[0]. this refers to the Dom-Element, where the event occured.

IE (up to version 8) has a proprietary way for binding event-handlers:

elem.attachEvent("event-type",function(){})

It has some shortcomings: this refers to the global object instead of the DOM-Element, and the event Object is not passed as a parameter.

However, Microsoft introduced window.event which always holds the last event that occured in the document. So you can use it in the function as follows:

function(){
   var e = window.event;
}

This window.event is available in several browsers, but you should not rely on that nor use it (which is recommended for most global variables).

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • what happen if you bind event differently? (1) – ciochPep Feb 08 '13 at 13:31
  • @ciochPep You should avoid this, but you can hand over the event object by explicitely handing the `window.event` to the function `onclick='myFunc(event,params)'` – Christoph Feb 08 '13 at 14:11