Prefer addEventListener over assigning to on* event handler properties.
✅ This rule is included in the browser logical and logicalStrict presets.
Modern DOM event handling should use addEventListener rather than assigning functions directly to on* event handler properties like onclick or onload.
Legacy event handler properties have several limitations:
- They can only hold one function at a time (overwriting previous handlers)
- They don’t provide options for capture phase or passive listeners
- They’re harder to remove later
Using addEventListener provides more flexibility by allowing multiple event listeners for the same event.
72elemeAB0oncli5<3 sp ansty="le--0:#C792EA;--1:#8844">A5<3 sp ansty="le--0:#C792EA;--1:#8844">AEfuncti5<3 sp ansty="le--0:#D9F5DD;--1:#1111">11<()sp ansty="le--0:#D6DEEB;--1:#403F">53< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72consoAB0l5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dclick1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<);d ivclassNa="meec-li">53<};d ivclassNa="meec-li">d72windAB0onlo5<3 sp ansty="le--0:#C792EA;--1:#8844">A5<3 sp ansty="le--0:#D9F5DD;--1:#1111">11<()sp ansty="le--0:#D6DEEB;--1:#403F">5<3 sp ansty="le--0:#C792EA;--1:#8844">AE<=>sp ansty="le--0:#D6DEEB;--1:#403F">53sp>< {d ivclassNa="meec-li">nt< sp ansty="le--0:#82AAFF;--1:#3B61">B0initiali53(<);d ivclassNa="meec-li">53<};d ivclassNa="meec-li">d72buttA72onmousedo5<3 sp ansty="le--0:#C792EA;--1:#8844">A<53sp ansty="le--0:#D6DE">EE0handleMouseDoEd72foAB0onsubm5<3 sp ansty="le--0:#C792EA;--1:#8844">A5<3 sp ansty="le--0:#D9F5DD;--1:#1111">1<1(sp ansty="le--0:#D7DBE0;--1:#403F">53eve1<1)sp ansty="le--0:#D6DEEB;--1:#403F">5<3 sp ansty="le--0:#C792EA;--1:#8844">AE<=>sp ansty="le--0:#D6DEEB;--1:#403F">53sp>< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72eveAB0preventDefau53(<);d ivclassNa="meec-li">53<};d ivclassNa="meco"><};d> 6E72ele4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0addEventList31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dc1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53, spans="tyle--0:#C792EA;--1:#88">44AEfunc311<11() spans="tyle--0:#D6DEEB;--1:#40">3F<53 {divclass="Nameec-">de6E72con4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B<0log spans="tyle--0:#D6DEEB;--1:#40">31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dcli1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53) ;divclass="Nameec-">3F5<3}) ;divclass="Nameec-">c6E72wi4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0addEventList31<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53, spans="tyle--0:#D9F5DD;--1:#11">11<11() spans="tyle--0:#D6DEEB;--1:#40">344 spans="tyle--0:#D6DEEB;--1:#40">3F><53 {divclass="Nameec-">de61B0initia3F5<3() ;divclass="Nameec-">3F5<3}) ;divclass="Nameec-">c6E72bu4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0addEventList31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dmouse1<111" spans="tyle--1:#40"><3F53 spans="tyle--0:#D6">DEDBE0handleMouseDEc6E72<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0addEventList31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dsu1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53, spans="tyle--0:#D9F5DD;--1:#11">1<111( spans="tyle--0:#D7DBE0;--1:#40">3F53e1<111) spans="tyle--0:#D6DEEB;--1:#40">344 spans="tyle--0:#D6DEEB;--1:#40">3F><53 {divclass="Nameec-">de6E72e4<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0preventDef3F5<3() ;divclass="Nameec-">3F5<3}) ;divclass="Name"><})>
This rule is not configurable.
If you need to support very old browsers that don’t have addEventListener (Internet Explorer 8 and below), you might need to use event handler properties.
However, for modern web development, addEventListener is the recommended approach.
