在移动互联网时代，页面的触控交互变得越来越重要。对于网页开发者而言，理解和掌握如何通过JavaScript监听用户在移动端的滚动（scroll）和触摸（touch）事件变得至关重要。本文主要讲解了如何使用`addEventListener`方法来监听这些事件，并提供了一个实例解析。
我们来看一下`addEventListener`方法的基本用法。`addEventListener`是Web API提供的一个方法，允许我们为当前的DOM元素添加一个事件监听器。当指定的事件发生时，会执行我们定义的回调函数（callback）。该方法的基本语法如下：
```javascript
element.addEventListener(name, callback[, useCapture]);
```
其中，`name`是一个事件名称，比如`scroll`、`touchstart`、`touchmove`、`touchend`等。`callback`是一个函数，当事件发生时将被调用。`useCapture`是一个可选参数，它决定了事件监听器是在事件捕获阶段还是在事件冒泡阶段被调用。如果`useCapture`为`true`，表示在捕获阶段处理事件；如果为`false`（默认值），则在冒泡阶段处理事件。
特别需要提到的是，`addEventListener`方法还支持一个可选的第四参数，一个配置对象，用于设置一些可选的参数。例如，当监听滚动事件时，可以通过配置对象的`passive`属性来指定是否阻止默认的滚动行为。
在移动端开发中，我们常常需要监听触摸事件来处理用户的滑动操作。常见的触摸事件有三个：
- `touchstart`：手指开始触摸屏幕时触发。
- `touchmove`：手指在屏幕上滑动时不断触发。
- `touchend`：手指离开屏幕时触发。
这些触摸事件只在移动设备上生效，而在PC端则不会触发。这些事件的监听对于创建流畅的触摸交互体验至关重要。
接着，我们来关注`scroll`事件。`scroll`事件在用户滚动页面时触发，无论是在移动设备还是在PC端。通过监听`scroll`事件，我们可以检测页面或元素的滚动位置，进而执行一些自定义的逻辑，比如懒加载图片、显示或隐藏导航栏等。
在使用`addEventListener`监听`scroll`事件时，我们可以设置配置对象的`passive`属性。如果`passive`属性设置为`true`，则表示监听器不会调用`event.preventDefault()`方法阻止默认的滚动行为，这对提高页面的滚动性能很有帮助。在一些现代浏览器中，当`passive`被设置为`true`时，即使开发者没有明确指定，浏览器也会默认将其设置为`true`，以提升滚动性能。
对于页面滚动导致的卡顿问题，`passive: true`可以防止这种情况的发生。在某些浏览器中，如果没有明确设置`passive`，则可能导致滚动事件处理程序阻止了默认的滚动行为，从而造成页面滚动卡顿。
监听`scroll`和`touch`事件对于改善用户的交互体验非常重要。通过合理地使用`addEventListener`方法，并适当配置`useCapture`和`passive`参数，开发者可以有效地控制事件的捕获、冒泡以及默认行为，从而创建更加流畅、响应迅速的网页应用。本文通过实例讲解，帮助大家更好地理解这些概念，并鼓励大家通过实践来深化理解。
