请问老师源生事件和自定义事件

Question

 const dropEvent = createEvent.drop(uploadArea);
    Object.defineProperty(dropEvent, 'dataTransfer', {
      value: {
        files: [testFile],
      },
    });
    // 在upload上触发名称为drop的dropEvent事件
    fireEvent(uploadArea, dropEvent)
    expect(dragProps.beforeUpload).toBeCalled();
    await waitFor(() => {
      expect(wrapper.queryByText('drag.png')).toBeInTheDocument();
    });

老师我不太明白这里的逻辑。。。
我理解是说，比如我在html中new Event(‘click’)和源生HTML中的事件重名了，我的Dom元素上本来还监听一个原本的click事件。当我在HTML调用dispatchEvent时，同时会触发源生事件也会触发自定义的事件。

然后当我调用dispatchEvent触发两个同名事件传入的是我自定义事件的参数，而当我点击时，同时也会触发click事件。但是此时传入的参数是正常点击的参数对吗。

请问下老师我能这样理解吗，在js中事件的触发仅仅针对名称，如果我定义的自定义事件名称和源生重复了比如click，当我点击click时，js只会找到名称去触发。同时会触发两个click事件，但是此时它传入的事件对象是正常的event。

而当我调用dispathEvent触发时，两次也都会触发。但是参数就是我自己定义的自定义事件的Event了。老师我这样理解正确吗，稍微有点绕。

就是说JS中事件是根据名称来触发的，实质上不区分什么源生自定义。只区分触发的方式

Answer 1

张轩 2021-09-26 09:46:05

同学你好 首先 这段代码和你说的问题没什么关系 这段代码的用途是因为 jsdom （jest 底层用来使用 javascript 模拟 dom 运行环境的库）没有提供 dropEvent，而模拟 drop 的一种模式。

再回到你的问题，监听多少个事件就是采用 addEventListener 实现的，这个是 DOM 二级事件，调用多次就可以添加多次事件，和触发什么方法没关系。

比如说

const ele = document.getElementById('test')
ele.addEventListener('click', () => {
    alert(1)
})
ele.addEventListener('click', () => {
    alert(2)
})
// 添加了两个事件
// 使用程序触发
const event = new Event('click')
ele.dispatchEvent(event)
// 两次都会被调用
// 这个不管是自定义，还是已存在的事件都可以使用这种事件进行处罚

• 提问者 hy_wang #1

  老师但是当我点击时出发的click和通过dispatchEvent触发的event对象其实是不同的，我想表达的是说我们正是通过dispathEvent这种方式触发事件传递自定义Event事件对象才mock了jsdom中对于dateTranser的实现。请问老师是这个意思吗

• 张轩 回复 提问者 hy_wang #2

  同学你好 你的理解是正确的