浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

浅谈事件冒泡

当一个元素上触发一个事件（比如鼠标点击），该事件会从该元素开始向上冒泡，直到传到文档的根节点。因此，如果父元素和子元素都定义了同一个事件处理程序，这个事件会先被触发在子元素上，然后再在父元素上触发。

<div id="parent">
  <div id="child"></div>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function(event) {
    console.log('parent clicked');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    console.log('child clicked');
  });
</script>

在上面的例子中，当点击子元素时，控制台会依次输出"child clicked"和"parent clicked"。

浅谈事件委托

事件委托利用了事件冒泡的原理，将本该直接添加到子元素中的事件监听器，添加到其父元素上。这样父元素就可以处理在它内部的所有子元素的事件了，从而减少了事件处理器的数量。

以添加按钮为例，如果一个页面上有多个按钮需要被点击，我们可以为每个按钮添加事件监听器，但这样就会导致事件处理器的数量呈指数级增长。更好的做法是为父元素添加一个事件监听器，然后根据点击事件传播到的目标来判断应该执行何种操作。

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

<script>
  document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
      console.log('Button clicked, delete item');
    }
  });
</script>

在上面的例子中，我们为ul元素添加了一个click事件监听器，然后判断点击事件传播到的元素是否为button元素。如果是，则执行删除操作。

jQuery元素节点操作

jQuery是一个非常流行的JavaScript库，它封装了许多常用的DOM操作方法。以下是一些常用的jQuery元素节点操作方法：

• $(selector) - jQuery选择器，用于选取页面中的元素。
• html() - 获取/设置元素的HTML内容。
• text() - 获取/设置元素的文本内容。
• val() - 获取/设置元素的文本框的值。
• attr() - 获取/设置元素的属性。
• addClass() - 添加元素的class。
• removeClass() - 移除元素的class。
• toggleClass() - 如果存在指定的class，则从元素中删除该class；如果不存在，则添加该class。

以下是一个使用jQuery添加/删除class的例子：

<p id="paragraph">This is a paragraph.</p>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
  $('#paragraph').addClass('bold');

  setTimeout(function() {
    $('#paragraph').removeClass('bold');
  }, 3000);
</script>

在上面的例子中，我们使用$('#paragraph').addClass('bold')方法为p元素添加了一个bold类。3秒钟后，我们使用$('#paragraph').removeClass('bold')方法将bold类从p元素中移除。

滚轮事件

滚轮事件是在鼠标滚轮滚动时触发的事件。可以使用原生JavaScript或jQuery来处理滚轮事件。

以下是一个原生JavaScript处理滚轮事件的例子：

<div id="container">
  <h1>Scroll Me!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id rhoncus nibh. Nullam quis ante vel eros lacinia sagittis eget sit amet elit. Sed tristique quam sit amet elit elementum rhoncus. Proin pellentesque quam vel sem eleifend dictum. Sed ultricies massa vel felis sodales, vel venenatis ligula efficitur. Maecenas bibendum vulputate turpis in iaculis.</p>
</div>

<script>
  var container = document.getElementById('container');

  container.addEventListener('wheel', function(event) {
    if (event.deltaY > 0) {
      console.log('Scrolled down');
    } else {
      console.log('Scrolled up');
    }

    event.preventDefault();
  });
</script>

在上面的例子中，我们为一个div元素添加了滚轮事件监听器，然后通过deltaY判断滚轮滚动的方向是向上还是向下。

函数节流

函数节流是指在一段时间内多次调用一个函数时，只有在过了一定时间后才会实际调用。这样可以减少函数调用次数，从而提高性能和响应速度。

以下是一个使用原生JavaScript实现函数节流的例子：

<button id="button">Click me!</button>

<script>
  function throttle(func, wait) {
    var timer = null;

    return function() {
      if (!timer) {
        timer = setTimeout(function() {
          func.apply(this, arguments);
          timer = null;
        }, wait);
      }
    }
  }

  var button = document.getElementById('button');

  button.addEventListener('click', throttle(function() {
    console.log('Clicked the button');
  }, 1000));
</script>

在上面的例子中，使用了一个throttle函数来实现函数节流。该函数会返回一个新的函数，用来代替原函数。在这个新函数中，我们使用了setTimeout来实现延迟调用。如果在延迟时间内再次调用了这个新函数，它会被忽略，直到上一次调用完成，并重新开始计时。

以上就是对于事件冒泡、事件委托、jQuery元素节点操作、滚轮事件和函数节流的简要讲解和示例，可以帮助您更好地理解和使用它们。