事件委托(Event Delegation)是一种JavaScript编程技术，它利用了事件冒泡的特性，将事件处理程序绑定在父元素上，而不是绑定在每个子元素上。

　　实现事件委托的原理如下：

　　选择一个父元素，该父元素下有多个子元素。

　　将事件处理程序绑定在父元素上，而不是绑定在每个子元素上。

　　当用户触发事件时，事件会从子元素向父元素逐层冒泡，直到达到父元素。

　　在父元素上捕获到事件后，可以通过事件对象的target属性来确定事件的源元素，从而确定是哪个子元素触发了事件。

　　根据事件源元素的不同，执行不同的操作。

　　通过事件委托，我们可以减少事件处理程序的数量，提高代码的可维护性和性能。当我们需要对新增子元素也进行相应的事件绑定时，只需将其添加到父元素中即可，无需再次绑定事件处理程序。

　　下面是一个简单的实现事件委托的示例代码：

// 选择父元素
var parent = document.getElementById('parent');

// 绑定事件处理程序
parent.addEventListener('click', function(event) {
  // 获取事件源元素
  var target = event.target;

  // 判断事件源元素是否为子元素
  if (target && target.nodeName === 'LI') {
    // 执行操作
    console.log('Clicked item ' + target.textContent);
  }
});

 　　在上面的代码中，我们选择了一个父元素，并将事件处理程序绑定在该父元素上。当用户点击父元素下的任意一个子元素时，事件会从子元素向父元素逐层冒泡，最终被父元素捕获。在事件处理程序中，我们通过事件对象的target属性来获取事件源元素，并根据其类型来执行不同的操作。

上一篇

css绝对定位和相对定位

下一篇

js获取class属性的值