שיעור 16 באנגולר – אירועים של העכבר

אנגולר מאפשרת להגיב לאירועים של העכבר\מקלדת, ובפוסט הזה נראה איך מגיבים לאירועי עכבר.

התגובה לאירועים תמיד מתחילה בכתיבת שם האירוע בתוך סוגרים, למשל (click) ואחרי כן הסימן שווה (=) ואז שם הפונקציה, ובמידת הצורך גם פרמטרים.

אירוע לחיצה על העכבר – אנגולר

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-mouseevents2',
 template: `
 <h1>Hi</h1>
 <button (click)="fireEvent('Hi')">Click Me</button>
 
 `
})
export class Mouseevents2Component implements OnInit {

 constructor() { }

 fireEvent(msg) {
 console.log(msg);
 }

 ngOnInit() {
 }

}

העברת אוביקט האירוע לפונקציה

אפשר להעביר גם את האירוע עצמו, ולקבל המון מידע.

  • כדי להעביר את אובייקט האירוע עצמו, נרשום בפרמטר הראשון משתנה שמתחיל בדולר
  •  ניקח לדוגמא 2 מאפיינים מעניינים מתוך אוביקט האירוע – את ה- id, של האלמנט שלחצו עליו, ואת סוג האלמנט.
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-mouseevents2',
 template: `
 <h1>Hi</h1>
 <button 
 id="FirstButton"

 (click)="fireEvent($event,'Hi')">Click Me</button>
 
 `
})
export class Mouseevents2Component implements OnInit {

 constructor() { }

 fireEvent(event,msg) {
 console.log(event.target.id);
 console.log(event.type);
 }

 ngOnInit() {
 }

}

אירוע mouseover

האירוע הבא מתרחש כאשר עוברים עם העכבר על אלמנט

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-mouseevents2',
 template: `
 <h1>Hi</h1>
 <button 
 id="FirstButton"

 (click)="fireEvent($event,'Hi')">Click Me</button>
 <br>
 <button
 (mouseover)="fireAfterMouseover($event)">pass the mouse here</button>
 
 


 `
})
export class Mouseevents2Component implements OnInit {

 constructor() { }

 fireEvent(event,msg) {
 console.log(event.target.id);
 console.log(event.type);
 }

 fireAfterMouseover(event) {
 console.log(event.type);
 }

 ngOnInit() {
 }

}

אירועי עכבר נוספים

אירועים נוספים אפשרים :

  • mousedown – כאשר לוחצים ומחזיקים את העכבר
  • mouseup – כאשר משחררים את לחיצת העכבר
  • dblclick – לחיצה כפולה
  • drag  – כאשר מסמנים ואז מנסים לגרור את הקטע המסומן
  • dragover – כאשר מסמנים ואז מנסים לגרור משהו מעל האלמנט הנוכחי.

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *