Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-09

1 Now we will provide a detailed analysis of what this code means:

2 button.addEventListener('click', function () { // Instructions });1. Element

3 In the example above button is the button that will trigger an action based on a custom event (click, press, or entry). This element is indicated at the very beginning.

4 Next, add addEventListener after the dot. In other words, specify that we want to add an “event listener.”

5 2. Event name

6 The first parameter of the addEventListener function is the event name that we want to catch. The name is written as a string, so it must be indicated in quotation marks. There are special predetermined names for all events. Therefore, we will not be able to catch the click event by passing just any string that comes to mind, such as 'push', for example. You can read the list of event names<a>here</a>.

7 3. Handler

8 The second parameter of addEventListener is a function. This is the event handler. We will indicate what needs to be done inside this function when an event occurs and how it needs to be processed. You can write any instructions that you like inside this function: you can output messages to the console (which can be useful when you are debugging the code), change the classes or content of elements, and call other functions. On the inside, this is the same function as any other. The only difference is that there are some features that we will talk about later.

9 The main thing that you need to remember is that the function that is passed to the handleris not executed immediately. The actions from the body of this function will be executed only when an established event occurs.

10 As a result, we can read the code from this example in the following way: add a click handler to the button button. When you click on the button, certain instructions should be executed.

11 We already found the desired button, and we wrote it to the openPopupButton variable. We also added the click handler. Now let’s write the instructions to the handler. When it is clicked, we will output the message to the console to make sure that the event is actually triggered.