Browser

Table of Content

Event Handling

Events are actions or occurrences that happen in the browser, such as clicks, key presses, or form submissions. JavaScript provides various ways to handle these events to create interactive web applications.

This Privacy Policy describes how Alevio ("we," "our," or "us"), founded and led by Felix Danyluk (CEO and Founder), collects, uses, and discloses your information when you use our application, website, and services (collectively, the "Service").

Important:

Alevio is designed as a privacy-first application. All your personal data is stored locally on your device and is not transferred to our servers unless you explicitly activate cloud functions.

1. Information We Collect

Alevio operates primarily as a local application.
The information stored includes:

Personal information: name and preferences (stored locally only).
Usage data: daily responses and insights (stored locally only).
Device information: app preferences and settings (stored locally only).
AI Chat data: when using AI features, conversation history is stored locally on your device.
Image data: when using vision features, uploaded images are processed locally and may be temporarily stored for AI analysis.
Generated images: DALL-E generated images are saved locally on your device for display purposes.
Usage limits: daily usage tracking for cloud models and image generation is stored locally to enforce fair usage policies.

2. How We Use Your Information

We use the information we collect to:

Provide and maintain our Service
Improve and personalize your experience
Communicate with you about updates and features
Ensure the security and integrity of our Service

3. Data Storage and Security

Your data is stored locally on your device using secure, industry-standard encryption. We do not have access to your personal information unless you explicitly choose to share it through cloud features.

4. Third-Party Services

Alevio may integrate with third-party AI services for enhanced functionality. When using these features, only the necessary data is transmitted to provide the service. We carefully select partners who share our commitment to privacy.

Cloud Services: When you use cloud-based AI models (such as GPT-4o, Claude, or other cloud providers), your messages and uploaded images are sent to these services for processing. We use secure API connections and do not store your data on our servers.
Image Generation: When using DALL-E image generation, your text prompts are sent to OpenAI's servers to generate images. Generated images are returned to your device and stored locally.
Web Search: When using web search features, your search queries are sent to our search partners to retrieve relevant information. Search results are processed and returned to your device.
Apple Shortcuts: When using Apple Shortcuts integration, your device's Shortcuts app may access Alevio through URL schemes. This integration is handled entirely by your device's operating system.

5. Your Rights

You have the right to:

Access your personal data stored on your device
Delete your data at any time through the app settings
Opt out of cloud features and keep all data local
Contact us with any privacy concerns

6. Changes to This Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last Updated" date.

7. Contact Us

If you have any questions about this Privacy Policy or our privacy practices, please contact us at:

privacy.alevio@gmail.com

Adding Event Listeners

The addEventListener() method attaches an event handler to an element.

let button = document.getElementById("myButton");
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

This method provides several advantages:

Multiple event listeners can be attached to a single element.
It allows removing event listeners later.
It provides better separation of JavaScript from HTML.

Common Event Types

Events can be triggered by user actions or system interactions.

Mouse Events

click – Triggered when an element is clicked.
dblclick – Triggered on a double-click.
mouseover – Triggered when the mouse enters an element.
mouseout – Triggered when the mouse leaves an element.
mousedown / mouseup – Triggered when a mouse button is pressed or released.

Example:

document.getElementById("box").addEventListener("mouseover", () => {
  console.log("Mouse entered the box!");
});

Keyboard Events

keydown – Triggered when a key is pressed down.
keyup – Triggered when a key is released.
keypress – (Deprecated) Used for detecting character key presses.

Example:

document.addEventListener("keydown", event => {
  console.log(`Key pressed: ${event.key}`);
});

Form Events

submit – Triggered when a form is submitted.
change – Triggered when the value of an input field changes.
focus / blur – Triggered when an input field gains or loses focus.

Example:

document.getElementById("myForm").addEventListener("submit", event => {
  event.preventDefault(); // Prevents form submission
  console.log("Form submitted!");
});

Window Events

load – Triggered when the page finishes loading.
resize – Triggered when the window is resized.
scroll – Triggered when the page is scrolled.

Example:

window.addEventListener("resize", () => {
  console.log("Window resized!");
});

Event Object (`event`)

When an event occurs, an event object is automatically passed to the event handler, containing useful information about the event.

Example:

document.addEventListener("click", event => {
  console.log("Event Type:", event.type);
  console.log("Target Element:", event.target);
  console.log("Mouse Coordinates:", event.clientX, event.clientY);
});

Event Propagation (Bubbling and Capturing)

JavaScript events propagate through the DOM in two phases:

Capturing Phase – The event moves from the root element down to the target.
Bubbling Phase – The event moves from the target back up to the root.

By default, events bubble up.

Example of event bubbling:

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked!");
});
  
document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked!");
});

Clicking the child element will log:

To stop event propagation:

document.getElementById("child").addEventListener("click", event => {
  event.stopPropagation();
  console.log("Child clicked, but event won't bubble up.");
});

To use the capturing phase, pass true as the third argument in addEventListener():

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked during capture phase.");
}, true);

Removing Event Listeners

Use removeEventListener() to detach an event handler.

function showMessage() {
  console.log("Button clicked!");
}
  
let button = document.getElementById("myButton");
button.addEventListener("click", showMessage);
  
// Remove the event listener
button.removeEventListener("click", showMessage);

Important: The function reference must match exactly for removeEventListener() to work.

Event Delegation

Instead of adding event listeners to multiple elements, event delegation attaches a single listener to a parent element and checks which child triggered the event.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

Benefits of event delegation:

Improves performance by reducing the number of event listeners.
Useful for dynamically added elements.

Preventing Default Behavior

Some events have default browser behavior (e.g., form submissions, link clicks). The event.preventDefault() method prevents this.

document.getElementById("myLink").addEventListener("click", event => {
  event.preventDefault();
  console.log("Link click prevented!");
});

Conclusion

Event handling is essential for interactive web applications. This section covered event listeners, event propagation, event delegation, and preventing default behaviors. The next section will focus on working with forms and user input in JavaScript.