1

In the excellent book JavaScript Patterns by Stoyan Stefanov he gives the following example as a one-off callback:

document.addEventListener("click", console.log, false);

In Chrome this throws an Uncaught TypeError: Illegal invocation In Firefox it throws TypeError: 'log' called on an object that does not implement interface Console. In Safari it throws a generic TypeError: Type error. I'm not sure why. Any thoughts?

Dave Kanter
  • 940
  • 16
  • 28

5 Answers5

3

console is actually an object and the method log() needs the scope to access this object, e.g.

document.addEventListener("click", console.log.bind(console, "test"), false);
Wolfgang
  • 733
  • 4
  • 13
  • This is same thing with my answer. look the question again. Dave kaye trying to use console.log as a parameter "console.log" I think, he dont know about what the functional programming is this? And he is angry with my answer :) – Mehmet Aug 02 '16 at 18:07
  • 1
    As you can see, I commented you post- but the given example was poor that's why I added one. Calling console.log inside of a handler is not the same than providing a needed scope for a method. – Wolfgang Aug 02 '16 at 18:16
  • Exactly. And I'm not angry about anything, believe me. – Dave Kanter Aug 02 '16 at 18:17
  • You arent angry with me? So why did you give down vote to my answer. I was trying to help you with different approach – Mehmet Aug 02 '16 at 18:23
  • Mehmet, I appreciate your response. Are you sure I'm the one who downvoted your answer? Are you sure I'm angry with your answer? As I explained in my comment, the point was not to rewrite the function but to pass console.log() as a callback. The use of "bind" is much more helpful and tracks with the use of the callback as well as the explanations given in the rest of the chapter. I upvoted Niet's answer and awarded the points to Wolfgang for these exact reasons. – Dave Kanter Aug 02 '16 at 18:41
1

It always helps to think what this is.

The way you are calling console.log, this is unset (and unless you're in Strict Mode defaults to window). However, the function expects this to be console, thus giving the "illegal invocation" and "called on an object that does not implement interface Console" - you are literally calling it on nothing (or the Window)

It seems like the code is intended to console.log the event data, in which case you should explicitly do so:

document.addEventListener("click", function(e) {console.log(e);}, false);

Note that since it is being called "normally", this will be console as expected by the browser, and function as intended.

I would however recommend changing it to console.dir(e) so that you can actually explore the object data, because I imagine [object PointerEvent] isn't very useful.

Niet the Dark Absol
  • 301,028
  • 70
  • 427
  • 540
0

It's because console.log is a native method and you can't invoke it in a different context. When you pass it around as a callback, you basically assign it to a different context. Same happens if you do the following:

var foo = console.log;
foo(1, 2, 3);

Here's a reference SO answer.

Community
  • 1
  • 1
fodma1
  • 3,097
  • 1
  • 23
  • 41
0

I realized that O'Reilly books usually have an "errata" page on line, and sure enough there was my answer (page 66).

document.addEventListener("click", console.log.bind(console), false);

http://www.oreilly.com/catalog/errataunconfirmed.csp?isbn=9780596806767

Dave Kanter
  • 940
  • 16
  • 28
-1

console.log() is a function! So you can use like this;

document.addEventListener("click", function(){
    console.log("test log");
}, false);
Mehmet
  • 1,644
  • 3
  • 16
  • 25
  • Except the point is to use console.log as a callback, not fire it in a function. – Dave Kanter Aug 02 '16 at 17:44
  • You cant use callback like this. When you are calling console.log you must use console.log("bla bla") – Mehmet Aug 02 '16 at 17:47
  • The book is very well written. I'm pretty sure the author didn't just make this up to confuse people. – Dave Kanter Aug 02 '16 at 17:50
  • No man it is impossible to write "console.log" as a parameter without callback. If it used on a book like your code on question. It is wrong too. Why did you give me "Down Vote" ? Just I am trying to help you!! – Mehmet Aug 02 '16 at 17:58