Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Traversing Elements with querySelector

kabir k
kabir k
Courses Plus Student 18,036 Points


In the code,


why are we using "GlobalEventHandlers" instead of using just "Element" like this:


And how is the "GlobalEventHandlers" different from "Element"?

1 Answer

Hey Kabir,

The querySelector function actually just grabs a reference to a particular element that you can use to perform other actions on the element. After grabbing that reference, you can then use a global event handler such as onclick (like you do in this project) to execute a function once that event handler has executed on that element. So, these two functions work together to produce interactive content. :)

kabir k
kabir k
Courses Plus Student 18,036 Points

I'm not talking about the functions. I meant, how is the GlobalEventHandler different from Element in those two lines of code?

GlobalEventHandlers is just the group that Mozilla refers to as global event handlers. It is not a specific thing that is used in code.

kabir k
kabir k
Courses Plus Student 18,036 Points

Thanks but why is it called GlobalEventHandlers? What is it supposed to be doing?

From the article https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers at the MDN:

The GlobalEventHandlers interface describes the event handlers common to several interfaces like HTMLElement, Document, Window, or WorkerGlobalScope for Web Workers. Each of these interfaces can implement more event handlers.

GlobalEventHandlers is a raw interface and no object of this type can be created.

You're welcome, Kabir!