属性式注册与监听器式注册的本质差异

给元素挂事件处理程序有两种路数,背后的数据结构完全不同:把处理函数赋给元素的onclick这类属性,本质是在对象上设置一个普通字段,一个字段只能存一个值,后写的函数会直接覆盖先写的,所以同一个事件类型永远只能挂一个处理程序;而addEventListener()内部维护的是一个处理程序的列表而非单个字段,多次调用只是不断往列表里追加,同一个事件类型可以同时存在多个互不干扰的处理程序,事件发生时按注册顺序依次全部调用。这个差异决定了写可复用的库代码或给同一个元素独立叠加多个功能模块时,必须用addEventListener()而非属性赋值——后者会悄悄踩掉页面上其他代码已经注册好的处理程序,这种冲突往往只在集成阶段才会暴露,难以在孤立开发时被发现。