+
80
-

如何以同步的方式实现JavaScript事件监听,比如onclick?

如何以同步的方式实现JavaScript事件监听,比如onclick?


网友回复

+
0
-

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

</head>

<body>
    <button>以同步的方式实现事件监听</button>
    <script>
        // 请完成getElement函数让后续程序顺利执行
    function getElement(cssSelector) {
      const dom = document.querySelector(cssSelector)
      // 使用Proxy代理dom,拦截所有属性访问,实现事件监听
      const proxy = new Proxy(dom, {
        get(target, key) {
          // 若发现属性非wait开头,则返回原始对象
          if (!key.startsWith('wait')) {
            return Reflect.get(target, key)
          }
          // 截取wait后面的字符串并转换为小写,既为事件名称
          const eventName = key.replace('wait', '').toLowerCase()
          // 返回一个Promise,当事件触发时resolve
          return new Promise((resolve) => {
            // 事件只需要监听一次即可
            dom.addEventListener(eventName, resolve, { once: true })
          })
        },
      })
      return proxy
    }
    ;(async () => {
      const btn = getElement('button')
      //   while (1) {
      //     await btn.waitClick
      //     console.log('按钮被点击了')
      //   }
      // 仅仅监听10次
      for (let i = 0; i < 10; i++) {
        await btn.waitClick
        console.log('按钮被点击了')
      }
    })()
    </script>
</body>

</html>

点击按钮后,控制台会打印相应的文字。如果只需要监听10次就失效,可以使用for循环。学习这个有什么用呢?可以实现一个元素绑定的事件,在点击第几次时触发,或者每次点击都可以通过下标执行不同的任务。

我知道答案,我要回答