Dropdown events and methods in Bootsrap - Performance & Optimization

Performance: Dropdown events and methods

MEDIUM IMPACT

This affects interaction responsiveness and visual stability when users open or close dropdown menus.

Handling dropdown open/close with many event listeners

Bootsrap

const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
const dropdownList = dropdownElementList.map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl));

Uses Bootstrap's built-in dropdown methods and event delegation, reducing manual DOM manipulation and redundant listeners.

📈 Performance GainSingle reflow per toggle, faster interaction, and less JS blocking.

Handling dropdown open/close with many event listeners

Bootsrap

document.querySelectorAll('.dropdown-toggle').forEach(el => {
el.addEventListener('click', () => {
  // heavy logic or multiple DOM changes
  console.log('Dropdown toggled');
  // manually toggle dropdown
  const menu = el.nextElementSibling;
  menu.classList.toggle('show');
});
});

Manually toggling dropdown and attaching multiple event listeners causes extra layout recalculations and can block rendering.

📉 Performance CostTriggers multiple reflows per click and increases JS execution blocking interaction.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual event listeners with class toggling	Multiple event listeners per dropdown	Multiple reflows per toggle	High paint cost due to forced layout	[X] Bad
Bootstrap Dropdown methods	Single event delegation per dropdown	Single reflow per toggle	Minimal paint cost with optimized CSS	[OK] Good

Rendering Pipeline

Dropdown events trigger style changes that cause the browser to recalculate layout and repaint the dropdown menu visibility.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to toggling visibility and positioning of dropdown menus.

Core Web Vital Affected

INP

This affects interaction responsiveness and visual stability when users open or close dropdown menus.

Optimization Tips

1Use Bootstrap's built-in dropdown methods instead of manual event listeners.

2Avoid heavy logic inside dropdown event handlers to reduce scripting time.

3Minimize toggling classes that trigger layout recalculations to improve interaction speed.

Performance Quiz - 3 Questions

What is a performance benefit of using Bootstrap's built-in dropdown methods over manual event listeners?

A They increase the number of event listeners for better control.

B They reduce the number of reflows triggered during dropdown toggling.

C They add extra DOM nodes for better accessibility.

D They block rendering until dropdown animation finishes.

DevTools: Performance

How to check: Open DevTools > Performance tab > Record while toggling dropdowns > Stop and analyze the flame chart for layout and scripting times.

What to look for: Look for multiple layout recalculations and long scripting tasks during dropdown toggles indicating poor performance.

Practice

1. Which Bootstrap dropdown event is triggered just before the dropdown menu is shown?

easy

A. hidden.bs.dropdown

B. shown.bs.dropdown

C. hide.bs.dropdown

D. show.bs.dropdown

Solution

1. Step 1: Understand dropdown event timing

   The show.bs.dropdown event fires just before the dropdown menu appears.

2. Step 2: Differentiate from other events

   shown.bs.dropdown fires after showing; hide.bs.dropdown and hidden.bs.dropdown relate to closing.

3. Final Answer:

   show.bs.dropdown -> Option D

4. Quick Check:

   Event before showing = show.bs.dropdown [OK]

Hint: Events ending with .bs.dropdown show dropdown states [OK]

Common Mistakes:

• Confusing 'show' and 'shown' events
• Mixing show and hide events
• Assuming event fires after dropdown is visible

2. Which JavaScript method correctly opens a Bootstrap dropdown programmatically?

easy

A. dropdown.toggle()

B. dropdown.open()

C. dropdown.show()

D. dropdown.display()

Solution

1. Step 1: Recall Bootstrap dropdown methods

   The method toggle() toggles the dropdown menu open or closed programmatically.

2. Step 2: Eliminate incorrect methods

   open() and display() are not Bootstrap dropdown methods; show() is not a method on the dropdown instance.

3. Final Answer:

   dropdown.toggle() -> Option A

4. Quick Check:

   Open dropdown = toggle() method [OK]

Hint: Use toggle() to open or close dropdown programmatically [OK]

Common Mistakes:

• Using show() which does not exist
• Assuming open() method exists
• Confusing toggle() with show()

3. What will be logged to the console when this code runs?

const dropdownElement = document.querySelector('#myDropdown');
const dropdown = bootstrap.Dropdown.getOrCreateInstance(dropdownElement);
dropdownElement.addEventListener('shown.bs.dropdown', () => console.log('Dropdown opened'));
dropdown.show();

medium

A. Dropdown opened

B. No output

C. Error: dropdown.show is not a function

D. Dropdown closed

Solution

1. Step 1: Understand event listener setup

   The code listens for the shown.bs.dropdown event and logs 'Dropdown opened' when fired.

2. Step 2: Analyze dropdown.show() effect

   Calling dropdown.show() opens the dropdown and triggers the shown.bs.dropdown event, causing the log.

3. Final Answer:

   Dropdown opened -> Option A

4. Quick Check:

   shown.bs.dropdown triggers console log [OK]

Hint: shown.bs.dropdown fires after show() completes [OK]

Common Mistakes:

• Expecting output before dropdown opens
• Confusing show() with toggle()
• Missing event listener setup

4. Identify the error in this code snippet that tries to hide a Bootstrap dropdown:

const dropdownElement = document.querySelector('#menu');
const dropdown = new bootstrap.Dropdown(dropdownElement);
dropdown.close();

medium

A. Using 'new' keyword instead of getOrCreateInstance

B. Selecting element with wrong ID

C. Calling close() method which does not exist

D. Missing event listener for hide event

Solution

1. Step 1: Check Bootstrap dropdown methods

   Bootstrap dropdown does not have a close() method; it uses toggle() or dispose().

2. Step 2: Verify object creation

   Using new bootstrap.Dropdown() is valid; the error is not here.

3. Final Answer:

   Calling close() method which does not exist -> Option C

4. Quick Check:

   close() method is invalid for Bootstrap dropdown [OK]

Hint: Bootstrap dropdown has no close(), use toggle() or dispose() [OK]

Common Mistakes:

• Assuming close() method exists
• Confusing close() with jQuery methods
• Thinking new keyword causes error

5. You want to run a function only after a Bootstrap dropdown has fully closed. Which event should you listen to, and how do you programmatically close the dropdown?

hard

A. Listen to hide.bs.dropdown event and call dropdown.toggle()

B. Listen to hidden.bs.dropdown event and call dropdown.hide()

C. Listen to hidden.bs.dropdown event and call dropdown.toggle()

D. Listen to hidden.bs.dropdown event and call dropdown.dispose()

Solution

1. Step 1: Identify event after dropdown closes

   The hidden.bs.dropdown event fires after the dropdown is fully closed.

2. Step 2: Choose method to close dropdown programmatically

   Use dropdown.hide() to close the dropdown menu.

3. Final Answer:

   Listen to hidden.bs.dropdown event and call dropdown.hide() -> Option B

4. Quick Check:

   Close dropdown with hide(), detect close with hidden.bs.dropdown [OK]

Hint: Use hidden.bs.dropdown event and hide() to close dropdown [OK]

Common Mistakes:

• Listening to hide.bs.dropdown instead of hidden.bs.dropdown
• Using toggle() which toggles state instead of specifically closing
• Calling dispose() which removes dropdown instance