JavaScript

Browser Events

<form id="fruit-cart">
  <label>Select Fruit:</label>
  <select>
    <option value="apple">Apple 🍎</option>
    <option value="orange">Orange 🍊</option>
    <option value="mango">Mango 🥭</option>
    <option value="banana">Banana 🍌</option>
  </select>
  <button id="button" type="button">Purchase</button>
</form>

// Get references to the parent div and the child button
const parentDiv = document.getElementById('fruit-cart');
const button = document.getElementById('button');

const handleFormEvent = () => {
  console.log("Form event Triggered!");
};

const handleButtonEvent = (event) => {
  console.log("Button clicked!");
};

// Attach event listeners
parentDiv.addEventListener('click', handleFormEvent);
button.addEventListener('click', handleButtonEvent);


// Get references to the parent div and the child button
const parentDiv = document.getElementById('fruit-cart');
const button = document.getElementById('button');

const handleFormEvent = () => {
  console.log("Form event Triggered!");
};

const handleButtonEvent = (event) => {
  console.log("Button clicked!");
  event.stopPropagation();
};

// Attach event listeners
parentDiv.addEventListener('click', handleFormEvent);
button.addEventListener('click', handleButtonEvent);
