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);
    });
  • 相关阅读:
    uni-app拒绝授权后再次授权
    vue触底操作
    vue滚动条滚到到底部触发的方法
    pagination插件使用例子
    修改后台返回数据的字段
    v-cloak指令的作用
    修改checkbox样式
    获取selected的值
    前端工程师必备的几个实用网站
    html发展史简介(摘抄)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12775169.html
Copyright © 2011-2022 走看看