Event Bubbling

Event Bubbling in Vanilla JS

Demostrate the native event handling under VanillaJS

Live Editor

function Example() {
  useEffect(() => {
    const handleBtnClick = (e) => { console.log('Button clicked'); }
    const handleLiClick  = (e) => { console.log('Li clicked'); }
    const handleUlClick  = (e) => { console.log('Ul clicked'); }
    const handleDivClick = (e) => { console.log('Div clicked'); }
    const handleBtnClickCap = (e) => { console.log('Button clicked (Capture)'); }
    const handleLiClickCap  = (e) => { console.log('Li clicked (Capture)'); }
    const handleUlClickCap  = (e) => { console.log('Ul clicked (Capture)'); }
    const handleDivClickCap = (e) => { console.log('Div clicked (Capture)'); }

    document.getElementById('btn-example-vanilla').addEventListener('click', handleBtnClick)
    document.getElementById('li-example-vanilla').addEventListener('click', handleLiClick)
    document.getElementById('ul-example-vanilla').addEventListener('click', handleUlClick)
    document.getElementById('div-example-vanilla').addEventListener('click', handleDivClick)
    document.getElementById('btn-example-vanilla').addEventListener('click', handleBtnClickCap, true)
    document.getElementById('li-example-vanilla').addEventListener('click', handleLiClickCap, true)
    document.getElementById('ul-example-vanilla').addEventListener('click', handleUlClickCap, true)
    document.getElementById('div-example-vanilla').addEventListener('click', handleDivClickCap, true)

    return () => {
      document.getElementById('btn-example-vanilla').removeEventListener('click', handleBtnClick)
      document.getElementById('li-example-vanilla').removeEventListener('click', handleLiClick)
      document.getElementById('ul-example-vanilla').removeEventListener('click', handleUlClick)
      document.getElementById('div-example-vanilla').removeEventListener('click', handleDivClick)
      document.getElementById('btn-example-vanilla').removeEventListener('click', handleBtnClick, true)
      document.getElementById('li-example-vanilla').removeEventListener('click', handleLiClick, true)
      document.getElementById('ul-example-vanilla').removeEventListener('click', handleUlClick, true)
      document.getElementById('div-example-vanilla').removeEventListener('click', handleDivClick, true)
    }
  })
  return (
    <div id="div-example-vanilla">
      <ul id="ul-example-vanilla">
        <li id="li-example-vanilla">
          <button id="btn-example-vanilla">Click</button>
        </li>
      </ul>
    </div>
  );
}

Result

Loading...

Event Bubbling in React

Same example, but implemented in React

Live Editor

function Example() {
  const handleBtnClick = (e) => { console.log('Button clicked'); }
  const handleLiClick  = (e) => { console.log('Li clicked'); }
  const handleUlClick  = (e) => { console.log('Ul clicked'); }
  const handleDivClick = (e) => { console.log('Div clicked'); }
  const handleBtnClickCap = (e) => { console.log('Button clicked (Capture)'); }
  const handleLiClickCap  = (e) => { console.log('Li clicked (Capture)'); }
  const handleUlClickCap  = (e) => { console.log('Ul clicked (Capture)'); }
  const handleDivClickCap = (e) => { console.log('Div clicked (Capture)'); }

  return (
    <div onClick={handleDivClick} onClickCapture={handleDivClickCap}>
      <ul onClick={handleUlClick} onClickCapture={handleUlClickCap}>
        <li onClick={handleLiClick} onClickCapture={handleLiClickCap}>
          <button onClick={handleBtnClick} onClickCapture={handleBtnClickCap}>
            Click
          </button>
        </li>
      </ul>
    </div>
  );
}

Result

Loading...