uniapp不支持button.addEventListener

对于UniApp，你可以使用v-on指令来监听按钮的点击事件，而不是使用addEventListener。v-on指令允许你在模板中直接绑定事件处理函数。

例如，你可以这样写一个按钮的点击事件：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理按钮点击事件的逻辑
    }
  }
}
</script>

在上面的例子中，当按钮被点击时，handleClick方法会被调用。

相关问题

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>

###

uniapp addEventListener

在UniApp中，可以使用addEventListener方法来为指定的元素添加事件监听器。这个方法可以用于绑定各种类型的事件，例如点击事件、滑动事件、触摸事件等。当指定的事件触发时，绑定的监听器函数将会被调用。

下面是一个使用addEventListener方法添加事件监听器的示例代码：

export default {
  mounted() {
    // 获取元素
    const myButton = uni.createSelectorQuery().select('#my-button')

    // 添加点击事件监听器
    myButton.addEventListener('tap', this.handleClick)
  },
  methods: {
    handleClick() {
      // 处理点击事件
      console.log('Button clicked!')
    }
  }
}

在上面的示例中，mounted生命周期钩子函数用于在页面加载完成后执行代码。首先，通过uni.createSelectorQuery().select方法获取到需要绑定事件的元素。然后，使用addEventListener方法为该元素绑定了一个tap（点击）事件监听器，当按钮被点击时，会调用this.handleClick方法来处理点击事件。

请注意，addEventListener方法是UniApp特有的，它并不是原生JavaScript中的方法。