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

// 请完成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循环。
我学了上面这个有什么用呢?
可以实现一个元素绑定的事件点击第几次时候触发。或者每次点击都可以通过下标执行不同任务。


smallStone
419 声望71 粉丝

前端一枚^_-