模拟事件行为

1.元素点击

模拟点击事件，hack 的方式，使 React 和 Vue 框架内部的数据可以响应

github.com/facebook/re…

// 自定义事件触发
export const elementEvent = (element: Element | null) => {
  if (!element) {
    return
  }

  // 鼠标覆盖
  const event = new MouseEvent('mouseover', {
    view: window,
    bubbles: true,
    cancelable: true,
  })
  element?.dispatchEvent(event)

  // 点击
  const clickEvent = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
  })
  element?.dispatchEvent(clickEvent)
}

2.输入框输入

export const elementInputEvent = (element: Element | null) => {
  if (!element) {
    return
  }

  // 第一种：直接设置value属性为想要的值
  element?.value = 'hahahhahahahaha'

  // 第二种：模拟连续输入text文本
  const text = 'Hello World';
  for (let i = 0; i < text.length; i++) {
    setTimeout(() => {
      element?.value += text[i];
      element?.dispatchEvent(new Event('input'));
  }, i * 100);
 }
}

const element = document.getElementById('taskName')
elementInputEvent(element)

3.radio选中

export const elementRadioEvent = (element: Element | null) => {
  if (!element) {
    return
  }

  // 第一种：直接调用 click() 方法模拟用户点击并选中相关选项。
  element?.click()

  // 第二种：触发 radio 按钮的点击事件，被点击时达到选中
  const event = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
  })
  element.dispatchEvent(event)
}
const element = document.getElementById('selectId')
elementRadioEvent(element)

4.checkbox选中

export const elementCheckboxEvent = (elements: Element[] | null) => {
    if (!elements) {
      return
    }
  
    // 第一种：直接调用 click() 方法模拟用户点击并选中相关选项。
    elements.forEach(checkbox => checkbox.click());

  
    // 第二种：创建事件
    elements.forEach(checkbox => {
      const event = new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      });
      checkbox.dispatchEvent(event);
    });
  }

const checkboxes = document.querySelectorAll('.check');
elementCheckboxEvent(checkboxes)