Listen to Events using HTML Attribute Event Handlers

Very interesting :) (NB: unfortunate for the double equality though unless you expect the DOM api to return a string value ? or another keyword value such as undefined ?)

Hi there!

The querySelector API can only return an Element or null

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

In this case, it is safe to simply use == to check if the result of document.querySelector('button') is null as the only two values we can get are Element or null

Already enjoying the course. It's a real treasure.

After quickly testing it seems that this code here

window.myOnclick = function() { 
  console.log('foo');
}

works equally as by doing

window.myOnclick = function myOnclick() { 
  console.log('foo');
}

Is there are reason why you give the function the same name before assigning to the window object?

Hi Ingvi,

Already enjoying the course. It's a real treasure.

Thank you so much! 🥰

Is there are reason why you give the function the same name before assigning to the window object?

This was purely a stylistic choice on my part. There is no need to name function expressions, so you can choose whichever style you like. I like to give things a name when I can to improve clarity, and that includes function expressions.

const foo = function foo {

};

Rather than:

const foo = function() {

}

Historically, named function expressions can also be slightly easier to debug as their name appears cleanly in stack traces.

That said, I use arrow function expressions in my own code a fair bit, and you cannot provide names for those

const foo = () => {};

Here is some more information on named vs anonymous function expressions: https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/scope%20%26%20closures/ch3.md#anonymous-vs-named

Cheers

what is the difference between bubble phase and capture phase ? why always event listeners are executed in bubble phase ?