点击时如何不将 id 添加到 url - Javascript

在Web开发中，我们经常需要根据用户的行为改变网页中的元素状态。这时候就需要用到Javascript来操作DOM，而往往这些操作需要给操作的元素添加一个唯一的ID作为标识。

但有时候我们又不希望这些ID被暴露在URL中，可能是因为隐私保护的考虑或者是为了防止攻击者通过暴力破解或爬虫等手段获取网站数据，那么我们该怎么做呢？

1. 使用 data-* 属性

我们可以使用HTML5的data-*属性来为元素添加自定义的数据，这些数据可以用JavaScript进行操作，但不会暴露在URL中。具体实现如下：

<button id="my-button" data-id="123">Click Me</button>

我们可以使用如下方式获取data-*属性的值并进行相应的操作：

var button = document.getElementById('my-button')
var id = button.getAttribute('data-id')

2. 使用事件代理

我们可以使用事件代理的方式，将事件处理程序添加到祖先元素上，从而避免将ID暴露在URL中。具体实现如下：

<div id="my-container">
  <button class="my-button">Button 1</button>
  <button class="my-button">Button 2</button>
  <button class="my-button">Button 3</button>
</div>

var container = document.getElementById('my-container')
container.addEventListener('click', function (event) {
  if (event.target.classList.contains('my-button')) {
    //...
  }
})

在事件代理的模式中，我们将事件处理程序绑定到祖先元素上而不是绑定到每个子元素上。当点击一个子元素时，在祖先元素上监听到这个事件后，我们可以使用event.target来获取到被点击的子元素，并进行相应的处理。

3. 使用闭包

在JavaScript中，我们可以使用闭包来隐藏ID，例如：

(function () {
  var id = 123
  document.getElementById('my-button').addEventListener('click', function () {
    // 使用 id
  })
})()

在闭包中，我们将ID存储在私有作用域中（即闭包中），外界无法访问，从而达到隐藏ID的目的。

以上三种方法是常见的在不将ID暴露在URL中的做法，根据实际需要选择相应的方法进行处理即可。

参考资料：

• MDN Web Docs - data-*
• MDN Web Docs - Event delegation
• MDN Web Docs - Closures