7

I just caught up in a confusion.
if suppose I implement addEventListener() as a global function (unlike as a method of some specific node like node.addEventListener() ) then does it act just like a usual global function or something goes under the hood while executing the code ending up becoming a method of some specific node

Note: DOM level 2, which defined the addEVentListener, stipulates that handler gets registered to the node. so which node is it registered to; window object is not a node

Jake
  • 244
  • 2
  • 16
  • Yes, `addEventListener` is a native method that is prototyped on every EventListener-compatible object, creating a global function with the same name makes no difference – adeneo Apr 22 '17 at 10:47
  • @adeneo but DOM level 2, which defined the addEVentListener, stipulates that handler gets registered to the node. so which node is it registered to; window object is not a node – Jake Apr 22 '17 at 10:54
  • The window object represents a window containing a DOM document, it's not a "node" per se, but the spec says that the event target that `addEventListener` is attached to may be an Element in a document, the Document itself, a **Window**, or any other object that supports events *(such as XMLHttpRequest)*. – adeneo Apr 22 '17 at 11:00
  • Oops thankx for bringing this into the light that event target can be `Window`, but still there remains something.. event target can be `Window` but what would be the currentTarget (base) on which the handler is assigned (registered) – Jake Apr 22 '17 at 11:04

1 Answers1

7

It will applies to the global object window (which have the function addEventListener). Because:

var a = 5;

console.log(a);
console.log(window.a);

Thus:

addEventListener( ... );

is the exact same things if you use:

window.addEventListener( ... );
Community
  • 1
  • 1
ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73
  • That mean basically the DOM event listener operates on the window object as a base object. is it? – Jake Apr 22 '17 at 10:38
  • Yes. Any global variables and functions get attached to the `window`. When calling those function or using those variables, you either use `window.theGlobalVariableOrFunction` or just `theGlobalVariableOfFunction`, in which case the `window` is the base object. – ibrahim mahrir Apr 22 '17 at 10:40
  • If you open your log your `window` object, you'll get the properties of `window` plus all the global vars and functions. Try it! – ibrahim mahrir Apr 22 '17 at 10:44
  • 1
    Yes I know that window is the global object associated with the global execution context. But addEventListener was defined by DOM level 2 and it states that the handler get registered to a specific node when the handler is executed and `window` object is not a node. So how shall i reconcile it? – Jake Apr 22 '17 at 10:45
  • 1
    @Andrew The `window` object [**inherits from EventTarget**](https://developer.mozilla.org/en-US/docs/Web/API/Window) which implements the event listening functions and events. Whether or not the `window` is a node has no relevance. It inherits from [**EventTarget**](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) so it has a `addEvenetListener`. – ibrahim mahrir Apr 22 '17 at 10:47
  • well window is itself the only global object, then how come it inherits from something. can you please mention any link which can redirect me to somewhere where this is well explained – Jake Apr 22 '17 at 10:52
  • @Andrew `window` (with lowercase `w`) is just an instance of a class (`Window` with uppercase `W`). The class chain of inheritance has no relation to wether the instance be global or not. JS just declare a new instance of the object and use it as a global one. – ibrahim mahrir Apr 22 '17 at 10:54
  • 1
    @Andrew http://stackoverflow.com/questions/6679635/is-window-really-global-in-javascript And http://stackoverflow.com/questions/6349232/whats-the-difference-between-a-global-var-and-a-window-variable-in-javascript – ibrahim mahrir Apr 22 '17 at 10:58
  • I think I need a little elaborated illustration on your this mentioned context – Jake Apr 22 '17 at 10:59
  • 2
    @Andrew The picture in this [**article**](https://docstore.mik.ua/orelly/webprog/jscript/ch04_07.htm) is perfect. `window` beign the global object means that it is the last object in the scope chain (the darkest gray rect in the picture). – ibrahim mahrir Apr 22 '17 at 11:11
  • @Andrew JS will start looking at the scope object of the currently executed function, if not it will look at the scope object of the container of the currently executed function ... and so on untill the variable is found or untill the last scope object (`window`) is reached, at which point either the value is returned (if found) or `undefined` if not. The same goes for declaring variables and defining functions, if no `var` is met, then the variable will be attached the last scope in the scope chain (the `window`). – ibrahim mahrir Apr 22 '17 at 11:16
  • @Andrew When calling `addEventListener` inside a function, then we look up in that functions scope (if for example we defined a function inside that function called `addEvenetListener` then this one will be used). If not the search will buble up untill it's found (defined in some scope) or untill the last scope is reached (the `window`). Since `window` has the function `addEvenetListener` then that one will be used. – ibrahim mahrir Apr 22 '17 at 11:19
  • yeah i got what you just stated about the scope chain and execution context. Btw also when i run "event.currentTarget" it gives the output `undefined`, so on what (node or any base) the event was fired? And also, as you stated if it goes `window.eventListener` under the hood, then `event.currentTarget` should yell the output `window` – Jake Apr 22 '17 at 11:21
  • @Andrew Are you sure? I've just tested and it's working. – ibrahim mahrir Apr 22 '17 at 11:27
  • Oops just a min, i think i did some mistake – Jake Apr 22 '17 at 11:30
  • **with** `window.` https://jsfiddle.net/od1yn2zf/ and **without** `window.` https://jsfiddle.net/v9y8sw4L/ – ibrahim mahrir Apr 22 '17 at 11:31
  • No mistake was done. actually in chrome console an error is popping up with a note that `currentTarget is not defined` . what output you are getting in chrome console – Jake Apr 22 '17 at 11:34
  • Did the `alert` pop up? – ibrahim mahrir Apr 22 '17 at 11:35
  • Nope not the window alert box, its the real error in chrome console ---> `Uncaught ReferenceError: currentTarget is not defined` – Jake Apr 22 '17 at 11:37
  • no i am runnning my code in google chrome and ide being the sublime. i wrote the code in sublime and run it in google chrome. and in google chrome developer console i am gettin that error about `currentTarget` – Jake Apr 22 '17 at 12:03
  • @Andrew With no idea how your code looks I can't say where the problem exactly is. Can you make a fiddle of your code? And take a look at my fiddles, and check if it's working for you. – ibrahim mahrir Apr 22 '17 at 12:07
  • i am not yet exposed to fiddle. Let me try it. can we share the same fiddle in collaborative way? – Jake Apr 22 '17 at 12:09
  • I don't think that's possible. I don't know much about jsFiddle. – ibrahim mahrir Apr 22 '17 at 12:10
  • @Andrew we can colaborate. Go here: https://jsfiddle.net/v9y8sw4L/#&togetherjs=DekLT4fTjV – ibrahim mahrir Apr 22 '17 at 12:14
  • i'm getting some issue, may be becaue i'm new to fiddle. Btw its more reliable in the context of precision, to check the code in the real browser. try to run your code with 'alert(event.currentTarget)' and check whether the alert pops up or not. If not, check the console you ll see the error. and let the event handler be global function without `window.` – Jake Apr 22 '17 at 12:16
  • are you on skype or something convenient platform? – Jake Apr 22 '17 at 12:18
  • @Andrew is that you on jsFiddle or is it someone else? – ibrahim mahrir Apr 22 '17 at 12:19
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142352/discussion-between-andrew-and-ibrahim-mahrir). – Jake Apr 22 '17 at 17:04