Handling DOM Events
You can execute JavaScript code after an event has been triggered. For example, after a web page completes loading or when the user clicks a link or a button. Some common examples of events that you can call JavaScript code are:
- When a user clicks a mouse;
- When a page load and unload;
- When a user hovers the mouse over an HTML element;
- When a user moves the mouse out from an HTML element;
- When an HTML form is changed;
- When an HTML form is submitted;
- After an image completes loading.
Let's get started with the click event.
The onclick Event
You can call the JavaScript code inside the event handler or separately in a function using the event handler. Let’s look at both the methods. For most of this chapter we’ll use the 2nd method.
Method 1: Inline JavaScript
index.html
Method 2: JavaScript Function
index.html
The onload and unload Event
The onload and unload events are used when a user enters or leaves a web page.
onload: Let's output the current date in the 'demo' element when the page loads.
index.html
onunload: Let's put an alert message when the user leaves or refreshes the below-mentioned web page.
index.html
Due to the differences in browser settings, this event may not function as you would expect.
The onmouseover and onmouseout Event
As you guessed right, the onmouseover event is when you bring the mouse cursor over to an HTML element. In contrast, onmouseout is when you move the cursor out of an element.
index.html
The onmousedown and onmouseup Event
These two events are part of the mouse click event. When you click on an element, the onmousedown event is triggered. Then when you release from the click, the onmouseup is called.
index.html
1. Consider the code below. When does the code inside the myFunction gets executed?
2. What is the difference between onmouseout and onmousedown events?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Stel mij vragen over dit onderwerp
Vat dit hoofdstuk samen
Toon voorbeelden uit de praktijk
Awesome!
Completion rate improved to 7.14Handling DOM Events
Veeg om het menu te tonen
You can execute JavaScript code after an event has been triggered. For example, after a web page completes loading or when the user clicks a link or a button. Some common examples of events that you can call JavaScript code are:
- When a user clicks a mouse;
- When a page load and unload;
- When a user hovers the mouse over an HTML element;
- When a user moves the mouse out from an HTML element;
- When an HTML form is changed;
- When an HTML form is submitted;
- After an image completes loading.
Let's get started with the click event.
The onclick Event
You can call the JavaScript code inside the event handler or separately in a function using the event handler. Let’s look at both the methods. For most of this chapter we’ll use the 2nd method.
Method 1: Inline JavaScript
index.html
Method 2: JavaScript Function
index.html
The onload and unload Event
The onload and unload events are used when a user enters or leaves a web page.
onload: Let's output the current date in the 'demo' element when the page loads.
index.html
onunload: Let's put an alert message when the user leaves or refreshes the below-mentioned web page.
index.html
Due to the differences in browser settings, this event may not function as you would expect.
The onmouseover and onmouseout Event
As you guessed right, the onmouseover event is when you bring the mouse cursor over to an HTML element. In contrast, onmouseout is when you move the cursor out of an element.
index.html
The onmousedown and onmouseup Event
These two events are part of the mouse click event. When you click on an element, the onmousedown event is triggered. Then when you release from the click, the onmouseup is called.
index.html
1. Consider the code below. When does the code inside the myFunction gets executed?
2. What is the difference between onmouseout and onmousedown events?
Bedankt voor je feedback!
