DEV Community
·
HTML事件处理程序是如何工作的？
内容提要
HTML事件处理程序以“on”开头，通常与JS函数关联。自定义元素的事件处理程序无法完全模拟原生事件，存在全球可用性和内容安全策略的限制。实现时需注意命名冲突和返回值等细节。
关键要点
-
HTML事件处理程序以'on'开头，通常与JS函数关联。
-
自定义元素的事件处理程序无法完全模拟原生事件，存在全球可用性和内容安全策略的限制。
-
事件处理程序是对象上的一个属性，其名称以'on'开头，值为JS函数或null。
-
所有内置事件处理程序在元素上都是全局可用的，适用于每个HTMLElement。
-
自定义事件的事件处理程序无法在其他元素上使用。
-
设置事件处理程序相当于为相应事件类型添加监听器。
-
返回值为false会取消事件，必须返回确切的false值。
-
设置事件处理程序时，新的值不会移除旧的监听器，而是重用现有的监听器。
-
非函数值会被强制转换为null，从而移除事件处理程序。
-
属性值从不为null，始终设置事件处理程序，移除属性才能移除事件处理程序。
-
事件处理程序的作用域包括当前元素的所有属性和相关表单元素的属性。
-
通过属性设置的事件处理程序具有特定的源文本，不能直接使用new Function()。
-
内容安全策略（CSP）会早期拒绝事件处理程序属性值，影响事件处理程序的状态。
-
自定义事件处理程序无法完全实现与原生事件处理程序相同的功能，需重新评估添加此类事件处理程序的必要性。
延伸解读
自定义事件处理程序的局限性
自定义元素的事件处理程序无法完全模拟原生事件，尤其是在全球可用性和内容安全策略（CSP）方面。这意味着在设计自定义事件时，开发者需要仔细考虑其必要性和潜在的兼容性问题。
事件处理程序的返回值
事件处理程序的返回值必须是确切的false，才能取消事件。这一点在实际开发中容易被忽视，开发者应确保在处理事件时明确返回值，以避免意外的事件传播。
命名冲突的风险
由于内置事件处理程序是全局可用的，未来可能会出现与自定义事件处理程序名称冲突的情况。为了避免这种情况，建议在命名自定义事件处理程序时使用非ASCII字符或大写字母，以降低未来兼容性问题的风险。
延伸问答
HTML事件处理程序的命名规则是什么？
HTML事件处理程序的名称以'on'开头，后面跟着事件类型。
自定义元素的事件处理程序与原生事件处理程序有什么不同？
自定义元素的事件处理程序无法完全模拟原生事件，且不具备全球可用性。
如何取消事件的默认行为？
通过事件处理程序返回确切的false值可以取消事件的默认行为。
设置事件处理程序时会发生什么？
设置事件处理程序相当于为相应事件类型添加监听器，旧的监听器不会被移除。
内容安全策略如何影响事件处理程序？
内容安全策略会早期拒绝事件处理程序属性值，影响事件处理程序的状态。
如何移除事件处理程序？
可以通过将事件处理程序属性设置为null或移除属性来移除事件处理程序。
