[分享]以同步的方式实现事件监听

问题：实现一个方法能让事件同步实现监听

// 请完成getElement函数让后续程序顺利执行，cssSelector为css选择器
function getElement(cssSelector) {

}
(async () => {
    const btn = getElement('button')
    while(1) {
        await btn.waitClick;
        console.log('按钮被点击了')
    }
})()

实现：

 <button>以同步的方式实现事件监听</button>

// 请完成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('按钮被点击了')
      }
    })()

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