html事件委托原理,JQuery事件委托原理与用法实例分析

HTML事件委托原理：在HTML中，一个元素可以包含多个子元素，当子元素上发生事件时，事件会向上冒泡到父元素，如果在父元素上绑定了事件处理程序，那么父元素就可以处理子元素的事件。这就是HTML事件委托的原理。

JQuery事件委托原理：JQuery中使用on()方法来实现事件委托，该方法的参数有三个：事件类型、选择器、事件处理函数。当事件类型发生在选择器匹配的元素上时，事件处理函数就会被调用。JQuery会在父元素上绑定一个事件处理程序，然后通过选择器匹配子元素，从而实现事件委托。

用法实例分析：

HTML事件委托的用法实例：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('You clicked on item: ' + event.target.textContent);
  }
}, false);

JQuery事件委托的用法实例：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$('#list').on('click', 'li', function(event) {
  console.log('You clicked on item: ' + $(this).text());
});

在JQuery中，可以使用on()方法来为父元素绑定事件处理程序，然后使用选择器来匹配子元素。这样，当子元素上发生事件时，JQuery就可以调用事件处理函数了。