如何取消H5 document.addEventListener 的监听事件

取消H5中的document.addEventListener监听事件可以使用removeEventListener方法。该方法需要传入两个参数，第一个参数是要取消监听的事件名称，第二个参数是要取消的事件处理函数。例如，如果要取消之前添加的visibilitychange事件监听，可以使用以下代码：

document.removeEventListener('visibilitychange', handleVisibilityChange);

其中，handleVisibilityChange是之前添加的事件处理函数。需要注意的是，取消监听时传入的事件处理函数必须与之前添加的完全相同，否则无法取消监听。

相关问题

uniapp 如何使用window.addEventListener

`uni-app`是一种基于微信小程序运行环境开发跨平台应用的技术框架。它允许开发者利用一套代码同时构建微信小程序、支付宝小程序、百度智能云等其他多种小程序版本，并支持原生H5页面，大大提高了开发效率。

当你想要给某个元素绑定事件监听器（例如点击事件），可以使用 `uni-app` 的内置函数 `uni.on` 或者 `uni.createSelectorQuery()` 等 API 来操作 DOM 元素并添加事件监听器。这里主要是介绍如何通过普通的 JavaScript 操作添加事件监听器：

### 使用 `window.addEventListener`

在 `uni-app` 中，你可以像在普通网页开发中一样使用 `window.addEventListener` 函数来添加事件监听器。这个函数需要三个参数：

1. **事件名称** (`"event"`): 要监听的事件类型，如 `"click"`、 `"touchstart"` 等。
2. **回调函数** (`callback`): 当触发该事件时，将被执行的函数。
3. **捕获模式** (`false` 或 `"capture"`): 默认值为 `false`，表示在事件冒泡阶段不会触发；如果设置为 `"capture"`，则表示在事件捕获阶段会触发。

下面是一个简单的示例：

// 监听按钮点击事件
document.getElementById('myButton').addEventListener('click', function() {
  console.log('按钮被点击了');
});

在这个例子中，当用户点击 ID 为 "myButton" 的按钮时，控制台会输出 '按钮被点击了'。

### 高级功能 - `uni.createSelectorQuery().select().boundingClientRect().boundingBox().exec(callback)`

对于更复杂的动态数据绑定场景，尤其是涉及到组件实例化、DOM渲染后的操作，`uni.createSelectorQuery()` 提供了一个强大的查询工具，可以帮助你定位到具体的节点，并执行一系列操作。然而，这种高级用法通常不需要直接使用 `window.addEventListener` 进行基本的事件监听。

### 示例

假设我们有一个 `index.html` 文件，其中包含一个按钮和一个文本框：

<!-- index.html -->
<view id="container">
  <button id="myButton">点击我</button>
  <text id="result"></text>
</view>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleClick() {
      // 添加一些业务逻辑处理点击事件
      this.message = 'Hello from UniApp!';
      document.getElementById('result').innerText = this.message;
    }
  },
  ready() {
    window.addEventListener('click', this.handleClick);
    const buttonId = '#myButton';
    const textId = '#result';

    uni.createSelectorQuery()
      .select(buttonId)
      .fields({
        node: true,
        boundingClientRect: true,
        scrollOffset: true
      })
      .exec(queryRes => {
        queryRes.forEach(res => {
          console.log(`Button position:`, res.boundingClientRect);
          console.log(`Button scroll offset:`, res.scrollOffset);
        });
      });

    window.addEventListener('scroll', () => {
      console.log('Window is being scrolled.');
    });
  }
};
</script>

###

H5下.Scrollbox用法

HTML5 中没有 Scrollbox 这个标签，但你可以使用 CSS 属性和 JavaScript 来实现滚动框。

CSS 实现滚动框：

可以在 CSS 中使用 `overflow` 属性来定义滚动框的行为。例如，将一个 div 元素定义为滚动框，如下所示：

<style>
.scrollbox {
  overflow: auto;
  height: 200px;
}
</style>

<div class="scrollbox">
  <!-- 这里放置需要滚动的内容 -->
</div>

这里我们使用了 `overflow` 属性，并将其设为 `auto`，这样在滚动框中放置的内容超过容器高度时，会自动出现滚动条，以便用户在滚动框中浏览内容。

JavaScript 实现滚动框：

使用 JavaScript 实现滚动框可以让你更加灵活地控制滚动框的行为，例如可以通过 JavaScript 来动态添加和删除滚动框中的内容。以下是一个基本的 JavaScript 滚动框示例：

<style>
.scrollbox {
  height: 200px;
  overflow: hidden;
}
</style>

<div class="scrollbox" id="scrollbox">
  <ul id="content">
    <li>第一条内容</li>
    <li>第二条内容</li>
    <li>第三条内容</li>
  </ul>
</div>

<script>
var content = document.getElementById("content");
var scrollbox = document.getElementById("scrollbox");

// 计算滚动框的高度
var scrollHeight = scrollbox.offsetHeight;

// 计算内容的高度
var contentHeight = content.offsetHeight;

// 如果内容高度大于滚动框高度，则显示滚动条
if (contentHeight > scrollHeight) {
  // 设置内容的高度为滚动框高度
  content.style.height = scrollHeight + "px";

  // 创建滚动条
  var scrollbar = document.createElement("div");
  scrollbar.className = "scrollbar";
  scrollbar.style.height = (scrollHeight / contentHeight * 100) + "%";
  scrollbar.style.top = "0px";
  scrollbar.style.right = "0px";
  scrollbar.style.position = "absolute";
  scrollbar.style.backgroundColor = "#ccc";
  scrollbar.style.borderRadius = "5px";
  scrollbar.style.cursor = "pointer";

  // 将滚动条添加到滚动框中
  scrollbox.appendChild(scrollbar);

  // 监听滚动条的拖动事件
  var isDragging = false;
  var startY = 0;
  var startTop = 0;

  scrollbar.addEventListener("mousedown", function(event) {
    isDragging = true;
    startY = event.clientY;
    startTop = parseInt(scrollbar.style.top);
  });

  document.addEventListener("mousemove", function(event) {
    if (isDragging) {
      var delta = event.clientY - startY;
      var top = startTop + delta;

      // 限制滚动条的移动范围
      if (top < 0) {
        top = 0;
      }

      if (top > scrollHeight - scrollbar.offsetHeight) {
        top = scrollHeight - scrollbar.offsetHeight;
      }

      // 移动滚动条
      scrollbar.style.top = top + "px";

      // 计算内容的滚动位置
      var contentTop = -top / scrollHeight * contentHeight;
      content.style.top = contentTop + "px";
    }
  });

  document.addEventListener("mouseup", function(event) {
    isDragging = false;
  });

  // 监听鼠标滚轮事件
  scrollbox.addEventListener("wheel", function(event) {
    event.preventDefault();

    // 计算滚动条的移动量
    var delta = event.deltaY;
    var top = parseInt(scrollbar.style.top) - delta;

    // 限制滚动条的移动范围
    if (top < 0) {
      top = 0;
    }

    if (top > scrollHeight - scrollbar.offsetHeight) {
      top = scrollHeight - scrollbar.offsetHeight;
    }

    // 移动滚动条
    scrollbar.style.top = top + "px";

    // 计算内容的滚动位置
    var contentTop = -top / scrollHeight * contentHeight;
    content.style.top = contentTop + "px";
  });
}
</script>

这个示例中，我们使用 JavaScript 计算滚动框和内容的高度，并根据内容的高度决定是否显示滚动条。如果需要显示滚动条，则动态创建一个 div 元素作为滚动条，并将其添加到滚动框中。同时，我们还监听滚动条的拖动事件和鼠标滚轮事件，以便让用户方便地浏览滚动框中的内容。