DEV Community
·
HTML事件处理程序是如何工作的？
💡
原文英文，约2000词，阅读约需8分钟。
📝
内容提要
HTML事件处理程序以“on”开头，通常与JS函数关联。自定义元素的事件处理程序无法完全模拟原生事件，存在全球可用性和内容安全策略的限制。实现时需注意命名冲突和返回值等细节。
🎯
关键要点
- HTML事件处理程序以'on'开头，通常与JS函数关联。
- 自定义元素的事件处理程序无法完全模拟原生事件，存在全球可用性和内容安全策略的限制。
- 事件处理程序是对象上的一个属性，其名称以'on'开头，值为JS函数或null。
- 所有内置事件处理程序在元素上都是全局可用的，适用于每个HTMLElement。
- 自定义事件的事件处理程序无法在其他元素上使用。
- 设置事件处理程序相当于为相应事件类型添加监听器。
- 返回值为false会取消事件，必须返回确切的false值。
- 设置事件处理程序时，新的值不会移除旧的监听器，而是重用现有的监听器。
- 非函数值会被强制转换为null，从而移除事件处理程序。
- 属性值从不为null，始终设置事件处理程序，移除属性才能移除事件处理程序。
- 事件处理程序的作用域包括当前元素的所有属性和相关表单元素的属性。
- 通过属性设置的事件处理程序具有特定的源文本，不能直接使用new Function()。
- 内容安全策略（CSP）会早期拒绝事件处理程序属性值，影响事件处理程序的状态。
- 自定义事件处理程序无法完全实现与原生事件处理程序相同的功能，需重新评估添加此类事件处理程序的必要性。
➡️
