Question

As mentioned in JavaScript, The Good Parts by Douglas Crockford, passing a string to setTimeout or setInterval invokes eval(), and should be avoided:

setTimeout('console.log("this uses eval()");', 100);

With that in mind, does the same thing happen when using inline event handlers, like this?:

<button onclick="console.log('click!');">Click Me</button>

In other words, does using an inline event handler incur extra parsing overhead when the event is fired, or is the parsing done during the initial document load with everything else (e.g. inline script blocks, scripts in the header, etc).

Answer 1

Yes, figuratively speaking, it does. All javascript in a page is parsed in exactly the same way as code passed to eval(). eval() is to be avoided, mostly because it is slower than plain code, as it requires an additional parse.

You can verify yourself if the browser has already compiled the handler or reparses it, at least for browsers with decent developer tools (example code uses jQuery, but of course you could rewrite it in plain JS):

<div id="test" onclick="alert('tested')">Click</div>
<script>
console.log(typeof $('#test')[0].onclick);
console.log($('#test')[0].onclick);
</script>

In my Chrome test, this logs the following:

Type of handler: function
function onclick(event) {
  alert('click')
} 

It is obvious that the onclick property is a compiled function value. You can also see the extra generated code for the handler, namely the function wrapped around the inline code. You can also set a breakpoint in the handler and observe the stack trace to verify that there is no eval call anywhere in it.