Web前端入门第 77 问：JavaScript 由程序触发绑定事件的几种方式

开发中经常会遇这样的需求：点击 A 元素的时候，需要触发 B 元素的事件，比如：点击一个 div 元素，然后触发 input:file 的 click 事件，用来选择文件上传。
click 方法

以上需求可通过元素的 click 方法触发：

1. <input type="file" ><br>
2. <button >前端路引--事件测试</button>

复制代码

效果：

点击事件有 click 方法可以使用，如果需求是点击 A 元素触发 B 元素的 mousedown 事件，那能用 mousedown 方法吗？

1. 前端路引--事件测试 test1<input type="file" ><br>
2. <button >前端路引--事件测试</button> test2

复制代码

效果：

想法在实现上遇到了问题，html 元素上不存在 mousedown 方法，click 方法也只能触发 click 事件，无法触发绑定的 mousedown 事件，那么有办法可以做到吗？答案肯定是有的~~
dispatchEvent 方法

dispatchEvent 方法可以触发任意事件，其参数是一个实例化的 Event 对象。以上例子中使用 dispatchEvent 方法，实现效果如下：

1. 前端路引--事件测试 test1<input type="file" ><br>
2. <button >前端路引--事件测试</button> test2

复制代码

效果：

Event 对象

语法：

1. new Event(type, options)

复制代码

该对象有两个参数：
第一个事件类型 type 为必传参数，不传则报错 Uncaught TypeError: Failed to construct 'Event': 1 argument required, but only 0 present.
第二个 options 参数为可选参数，拥有三个属性：
bubbles： 可选，Boolean 类型，默认值为 false，表示该事件是否冒泡。
cancelable： 可选，Boolean 类型，默认值为 false，表示该事件能否被取消。
composed： 可选，Boolean 类型，默认值为 false，指示事件是否会在影子 DOM 根节点之外触发侦听器。
bubbles 冒泡：
关于冒泡很好理解，就是子元素是否能冒泡到父元素，如下例子 test1 触发的事件将会冒泡到容器 test-container 上。

1.   <my-component id="host"></my-component><button >前端路引--事件测试 test0</button>
3. <button >前端路引--事件测试 test1</button>
4. <button >前端路引--事件测试 test2</button>

复制代码

效果：

cancelable 事件能否取消：
true：表示事件是可取消的，调用 event.preventDefault() 会阻止浏览器的默认行为。
false：表示事件不可取消，调用 event.preventDefault() 无效。
实测就算传入的是传入为 false，也能调用 event.preventDefault() 并不会报错，对 Event 对象无效，但是对 MouseEvent 对象有用（参考后文）。
设置此参数可在事件的 event 参数上获取传入的值：

1. <input type="file" ><br>
2. <button >前端路引--事件测试</button> cancelable: false<input type="file" ><br>
3. <button >前端路引--事件测试</button> cancelable: true

复制代码

效果：

dispatchEvent 触发的 Event 对象，并 不会响应 元素本身的默认事件，比如 a 标签的跳转，input:file 的文件选择等。

composed 是否允许穿透 shadow DOM 节点：
如果不使用影子节点，这属性基本没啥用处，影子节点在常规开发中很少使用~~
一个简单示例：

1.   <my-component id="host"></my-component>

复制代码

效果：

CustomEvent 对象

Event 对象没办法传入自定义数据，某些特定需求需要传入自定义参数时，可以祭出 CustomEvent 对象。
CustomEvent 继承 Event，所以 Event 支持的配置都支持，只是多了一个自定义数据字段。
示例：

1. 前端路引--事件测试 test1<input type="file" ><br>
2. <button >前端路引--事件测试</button> test2

复制代码

以上代码使用了 CustomEvent 触发了自定义的 dev 事件，并传入了自定义数据。
效果：

MouseEvent

前面说了 dispatchEvent 触发的 Event 对象不会响应元素本身的默认事件，但可以通过 MouseEvent 对象来触发一些元素本身的默认事件。
如下例子：

1. <input type="file" ><br>
2. <button >前端路引--事件测试</button> cancelable: false<input type="file" ><br>
3. <button >前端路引--事件测试</button> cancelable: true

复制代码

效果：

dispatchEvent 返回值当 event 可被取消（cancelable 值为 true），且 event 中至少有一个事件处理程序调用了 Event.preventDefault() 方法时，返回 false。否则，返回 true。
写在最后

按照 MDN 的说法，由程序触发的事件，还有一个专用名词 合成事件，表示不是浏览器本身触发的事件。
除了本文例子中的几个 Event 对象外，还有一些其他对象，在使用时可参考 MDN 文档。
用户交互：
鼠标、键盘、触摸交互  <my-component id="host"></my-component>MouseEvent, KeyboardEvent, TouchEvent
表单与输入：
输入框、表单提交  <my-component id="host"></my-component>InputEvent, SubmitEvent
媒体控制：
音视频播放、设备流  <my-component id="host"></my-component>MediaStreamTrackEvent
拖放与剪贴板：
拖拽操作、复制粘贴  <my-component id="host"></my-component>DragEvent, ClipboardEvent
存储与通信：
本地存储、跨文档通信  <my-component id="host"></my-component>StorageEvent, MessageEvent
错误与调试：
脚本错误捕获  <my-component id="host"></my-component>ErrorEvent
设备与传感器：
方向、加速度检测  <my-component id="host"></my-component>DeviceOrientationEvent
动画与过渡：
CSS 动画/过渡生命周期  <my-component id="host"></my-component>AnimationEvent, TransitionEvent

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！