JavaScript 事件流：深入理解事件处理和传播机制

是一种机制，用于描述和处理事件在 DOM 树中的传播过程.

1、事件流的发展流程

1)事件处理是通过在 DOM 元素上直接定义事件处理属性来实现的，称为 DOM0 级事件

1
2
3

const button = document.getElementById('myButton');
button.onclick = function() {
console.log('按钮被点击');};

2)addEventListener 方法允许为一个元素的同一个事件类型添加多个处理程序，并且可以控制事件的捕获阶段.DOM2

1
2
3

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('按钮被点击');});

3)DOM3 级事件规范定义了新的事件类型，如滚动事件、触摸事件、过渡事件等

1
2
3

const element = document.getElementById('myElement');
element.addEventListener('scroll', function(event) {
console.log('元素滚动事件');});

4)React 通过 Virtual DOM 的概念，将事件处理从直接操作 DOM 转移到组件层面进行管理。React 利用了合成事件（SyntheticEvent）来处理事件，实现了跨浏览器的一致性和性能优化.