zoukankan      html  css  js  c++  java
  • [HTML 5] Event Delegation and Dynamic Events

    For example, we have a list of 'li', for each of them we want to attach event listener to it

    Bad approach:

    const app = document.getElementById('app');
    app.innerHTML = `
      <h1>JavaScript DOM</h1>
      <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    `;
    
    const button = document.querySelector('button');
    const list = document.querySelector('#list');
    
    const items = [...list.querySelectorAll('li')];
     items.forEach(item => {
       item.addEventListener('click', handleClick);
     });

    Here, we use 'forEach' on 'li's to attach event listener.

    The problem for that approach is: when we want to dynamiclly add a new 'li' into the list, that new 'li' won't get the event listener dynamiclly.

    const app = document.getElementById('app');
    app.innerHTML = `
      <h1>JavaScript DOM</h1>
      <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    `;
    
    const button = document.querySelector('button');
    const list = document.querySelector('#list');
    
    const items = [...list.querySelectorAll('li')];
     items.forEach(item => {
       item.addEventListener('click', handleClick);
     });
    
    
    const item5 = document.createElement('li')
    item5.text = 'Item 5'
    list.append('item')

    No effect on clicking 'Item 5'.

    To solve the problem, we can use Event Delegation partten.

    Instead of add event listener on 'li' element, we add it to parent element 'ul'. Then rely on event bubbling up, we capture event in 'ul'. 

    const app = document.getElementById('app');
    app.innerHTML = `
      <h1>JavaScript DOM</h1>
      <button type="button">
        Add Item
      </button>
      <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    `;
    
    const button = document.querySelector('button');
    const list = document.querySelector('#list');
    
    // const items = [...list.querySelectorAll('li')];
    // items.forEach(item => {
    //   item.addEventListener('click', handleClick);
    // });
    
    function handleClick(event) {
      if (event.target.nodeName.toLowerCase() !== 'li') {
        return;
      }
      console.log(event.target.innerText);
    }
    
    list.addEventListener('click', handleClick);
    
    button.addEventListener('click', () => {
      const items = list.querySelectorAll('li');
      const li = document.createElement('li');
      li.innerText = `Item ${items.length + 1}`;
      list.append(li);
    });
  • 相关阅读:
    php插入日期到mysql失败
    CSS Triangle Arrow DIVs tooltilps
    转:javascript对json操作讲解
    bulletproof ajax:ajax 载入时显示动画
    javascript 和ajax创建bookmarket
    css 文字换行
    MySQL数据库在指定位置增加字段
    javascript获取网页URL地址及参数等
    Microsoft JScript runtime error: 'Sys' is undefined 的解决方法
    DetailsView的简单使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12775169.html
Copyright © 2011-2022 走看看