单击动态元素上的文档 - Javascript

在Web开发中，经常会涉及到动态添加元素并给它们添加事件监听器的操作。而在这些动态元素上添加事件监听器，需要使用一些特殊的技巧。

1. 使用事件委托

事件委托是一种非常常用的技巧，可以避免在每个动态元素上添加事件监听器。它的原理是把事件监听器添加在元素的父元素上，然后通过事件冒泡机制，让父元素代理子元素触发事件。

<ul id="my-list">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
  <li>元素4</li>
</ul>

<script>
document.getElementById('my-list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    // 处理事件
  }
});
</script>

在上面的代码中，只需要在父元素ul上添加一个事件监听器，就可以委托它下面的子元素li响应事件。

2. 事件监听器的绑定时机

通常情况下，我们在动态创建元素时，需要马上添加事件监听器。但有时候，我们需要在元素被添加到文档后再添加事件监听器，这时候就需要注意事件监听器的绑定时机。

var myButton = document.createElement('button');
myButton.textContent = '点击我';

// 在元素添加到文档后再添加事件监听器
myButton.addEventListener('click', function() {
  // 处理事件
});

document.body.appendChild(myButton);

在上面的代码中，我们先创建了一个button元素，并给它添加了一个click事件监听器。但是我们没有直接将它添加到文档中，而是在后面通过appendChild添加到文档中。

如果我们在添加元素到文档之前就添加事件监听器，那么这个监听器是不会生效的。

3. 使用事件委托处理复杂事件

在实际的开发中，我们有时需要处理比较复杂的事件，需要对事件的多个细节进行判断和处理。这时候，还需要配合使用事件委托和一些事件相关的属性来完成操作。

<ul id="my-list">
  <li data-id="1">元素1</li>
  <li data-id="2">元素2</li>
  <li data-id="3">元素3</li>
  <li data-id="4">元素4</li>
</ul>

<script>
document.getElementById('my-list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    var id = event.target.getAttribute('data-id');
    var type = event.ctrlKey ? 'CTRL' : 'NORMAL';
    // 处理事件
  }
});
</script>

在上面的代码中，我们给每个li元素添加了一个data-id属性，用来表示元素的唯一标识。在事件委托时，我们通过判断当前元素是否是li元素，然后通过getAttribute方法获取到这个元素的标识。

同时，我们还通过event.ctrlKey属性检测CTRL键是否被按下，用来判断事件类型。这样，就可以通过事件委托处理更加复杂的事件操作。

以上就是单击动态元素上的文档 - Javascript的介绍。希望对大家有所帮助。