לפעמים אנחנו רוצים לקשור ארועים אחד לשני, זאת אומרת, כאשר ארוע מסויים מפעיל פונקציה ב-JS אז ה-JS יפעיל ארוע אחר.
שימו לב, מדובר על ארועים של JS בלבד ולא של CSS.
אני אראה דוגמה באנגולר אבל מדובר בסופו של דבר על JS ולכן ניתן להמיר את הדוגמה לג'אווה-סקריפט נקי.
export class SomeCompComponent{ private eventerIn = new MouseEvent('mouseenter'); private eventerOut = new MouseEvent('mouseleave'); onFocus(event){ event.target.dispatchEvent(this.eventerIn); } onBlur(event){ event.target.dispatchEvent(this.eventerOut); } }
<button (focus)="onFocus($event)" (blur)="onBlur($event)">GO</button>
מה שבעצם עשינו הוא, כאשר הכפתור יקבל פוקוס, יופעל הארוע של כניסת עכבר (HOVER) וכאשר הכפתור יאבד פוקוס, יופעל הארוע של יציאת עכבר.
בדרך כלל נעשה דבר כזה כאשר אנחנו משתמשים בספרייה צד שלישי ואין לנו כל כך גישה אליה ויש לה ארוע שעושה משהו שאותו אנו רוצים להפעיל גם בארועים אחרים.