6.1 Event Object
JavaScript provides a powerful event system that lets you keep track of various user actions and other events happening in the browser. A key part of working with events is the event object, which contains info about the event and provides methods for handling it.
When an event occurs, the browser creates an event object that contains info about the event. This object is passed to the event handler as an argument.
Event Object Properties:
type: the type of the event (e.g.,click,keydown).target: the element where the event occurred.currentTarget: the element to which the event handler is attached.eventPhase: the phase in which the event is at (capturing, target, bubbling).bubbles: a boolean indicating if the event can bubble up.cancelable: a boolean indicating if the event can be canceled.defaultPrevented: a boolean indicating if the default action has been prevented.timeStamp: the time when the event was created.isTrusted: a boolean indicating if the event was triggered by a user or a script.
Event Object Methods:
preventDefault(): cancels the default action associated with the event.stopPropagation(): stops further event propagation.stopImmediatePropagation(): stops further event propagation and prevents other event handlers from being executed on the current element.
Example of Using the Event Object:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Output: click
console.log('Event target:', event.target); // Output: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Output: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Output: 2 (Target phase)
console.log('Bubbles:', event.bubbles); // Output: true
console.log('Cancelable:', event.cancelable); // Output: true
console.log('Time stamp:', event.timeStamp); // Output time in milliseconds
console.log('Is trusted:', event.isTrusted); // Output: true
});
</script>
</body>
</html>
6.2 Click Events (Mouse Events)
Mouse events are generated when a user interacts with an element using a mouse:
click: click eventdblclick: double-click eventmousedown: mouse button down eventmouseup: mouse button up eventmousemove: mouse movement eventmouseover: mouse hover eventmouseout: mouse out event
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Load Events
Load events occur when a resource finishes loading:
load: event that occurs when a resource/page is fully loadedDOMContentLoaded: event that occurs when the initial HTML document is loaded and parsed without waiting for stylesheets, images, and subframes to finish loading
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Focus Events
Focus events are generated when an element gains or loses focus.
focus: event that occurs when an element gains focusblur: event that occurs when an element loses focus
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Keyboard Events
Keyboard events are generated when a user presses keys on the keyboard:
keydown: event that occurs when a key is pressedkeyup: event that occurs when a key is releasedkeypress: event that occurs when a key is pressed and released (deprecated, not recommended for use)
Example:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION