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);
    });
  • 相关阅读:
    oracle 如何用触发器实现更新刚插入的数据
    数据库好论坛
    不同的用户导入数据库
    用函数式编程技术编写优美的 JavaScript
    使用GridView自带的ToolTip隐藏过长的数据
    含有dropdownlist的gridview增删改查
    数据分析
    数据分析
    xshell链接vbox 上 nat 方式链接虚拟机
    测试开发方法概述
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12775169.html
Copyright © 2011-2022 走看看