使用事件监听器移除函数内的函数：一种条件渲染的实现方案-js教程-PHP中文网

使用事件监听器移除函数内的函数：一种条件渲染的实现方案

DDD

发布： 2025-07-08 16:12:14

原创

398人浏览过

使用事件监听器移除函数内的函数：一种条件渲染的实现方案

在Web开发中，经常需要根据用户的交互动态地改变页面内容。例如，在一个餐厅网站中，用户点击不同的菜单选项（如“首页”、“关于”、“菜单”）时，页面应该显示相应的内容。一种实现方案是使用事件监听器和条件渲染，根据用户点击的菜单选项，有条件地渲染不同的页面内容。

核心思想：条件渲染

条件渲染的核心在于，根据某种条件（例如用户点击的菜单选项），决定渲染哪个函数。每个页面（“首页”、“关于”、“菜单”）都应该有自己独立的函数，负责渲染该页面所需的所有元素。当用户点击某个菜单选项时，就调用相应的函数来渲染页面。

实现步骤

创建页面函数： 为每个页面创建一个函数，例如 home()、about()、menu()。每个函数负责创建和渲染该页面所需的所有HTML元素。

function home() {
  const content = document.getElementById('content');
  content.innerHTML = '<h1>Welcome to our restaurant!</h1><p>Delicious food awaits you.</p>';
}

function about() {
  const content = document.getElementById('content');
  content.innerHTML = '<h1>About Us</h1><p>We are a family-owned restaurant...</p>';
}

function menu() {
  const content = document.getElementById('content');
  content.innerHTML = '<h1>Our Menu</h1><ul><li>Pizza</li><li>Pasta</li><li>Salad</li></ul>';
}

登录后复制

创建事件监听器： 为每个菜单选项添加事件监听器，监听用户的点击事件。当用户点击某个菜单选项时，调用相应的页面函数。

const homeLink = document.getElementById('home-link');
const aboutLink = document.getElementById('about-link');
const menuLink = document.getElementById('menu-link');

homeLink.addEventListener('click', () => {
  clearPage();
  home();
});

aboutLink.addEventListener('click', () => {
  clearPage();
  about();
});

menuLink.addEventListener('click', () => {
  clearPage();
  menu();
});

登录后复制

创建 clearPage() 函数： 在渲染新的页面内容之前，需要先清除页面上已有的内容。创建一个 clearPage() 函数，用于删除所有元素并准备页面以渲染来自其他函数的内容。

腾讯智影-AI数字人
基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情
```
function clearPage() {
  const content = document.getElementById('content');
  while (content.firstChild) {
    content.removeChild(content.firstChild);
  }
}
```
登录后复制
初始页面加载： 在页面加载时，默认渲染“首页”内容。
```
home(); // 页面加载时默认显示首页
```
登录后复制

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Restaurant Website</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#" id="home-link">Home</a></li>
        <li><a href="#" id="about-link">About</a></li>
        <li><a href="#" id="menu-link">Menu</a></li>
      </ul>
    </nav>
  </header>
  <div id="content">
    <!-- Content will be dynamically loaded here -->
  </div>

  <script>
    function home() {
      const content = document.getElementById('content');
      content.innerHTML = '<h1>Welcome to our restaurant!</h1><p>Delicious food awaits you.</p>';
    }

    function about() {
      const content = document.getElementById('content');
      content.innerHTML = '<h1>About Us</h1><p>We are a family-owned restaurant...</p>';
    }

    function menu() {
      const content = document.getElementById('content');
      content.innerHTML = '<h1>Our Menu</h1><ul><li>Pizza</li><li>Pasta</li><li>Salad</li></ul>';
    }

    function clearPage() {
      const content = document.getElementById('content');
      while (content.firstChild) {
        content.removeChild(content.firstChild);
      }
    }

    const homeLink = document.getElementById('home-link');
    const aboutLink = document.getElementById('about-link');
    const menuLink = document.getElementById('menu-link');

    homeLink.addEventListener('click', () => {
      clearPage();
      home();
    });

    aboutLink.addEventListener('click', () => {
      clearPage();
      about();
    });

    menuLink.addEventListener('click', () => {
      clearPage();
      menu();
    });

    home(); // 页面加载时默认显示首页
  </script>
</body>
</html>

登录后复制

注意事项