How to trigger event with another event

לפעמים אנחנו רוצים לקשור ארועים אחד לשני, זאת אומרת, כאשר ארוע מסויים מפעיל פונקציה ב-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) וכאשר הכפתור יאבד פוקוס, יופעל הארוע של יציאת עכבר.

בדרך כלל נעשה דבר כזה כאשר אנחנו משתמשים בספרייה צד שלישי ואין לנו כל כך גישה אליה ויש לה ארוע שעושה משהו שאותו אנו רוצים להפעיל גם בארועים אחרים.

פוסטים קשורים:

איך לבנות Directive באנגולר SEO| שינוי כותרת של הדף באנגולר איך להפעיל פונקציה ברכיב כשמתבצע ניווט באנגולר angular input and output in the same variable