请问老师源生事件和自定义事件
来源：10-14 拖动事件怎样测试？ - Upload 测试第二部分
hy_wang
2021-09-24
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中事件是根据名称来触发的，实质上不区分什么源生自定义。只区分触发的方式
写回答
1回答
-
张轩
2021-09-26
同学你好 首先 这段代码和你说的问题没什么关系 这段代码的用途是因为 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) // 两次都会被调用 // 这个不管是自定义，还是已存在的事件都可以使用这种事件进行处罚022021-09-27
相似问题