47

I am bit confused what exactly $event doing here and what is the difference between this two examples 

<button (click)="clicked($event)"></button>

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}

and

<button (click)="clicked()">Click</button>



 @Component(...)
    class MyComponent {
      clicked(event) {
      }
    }
BuZZ-dEE
  • 6,075
  • 12
  • 66
  • 96
Sarvesh Yadav
  • 2,600
  • 7
  • 23
  • 40
  • 1
    Under the hood Angular uses a param called $event and literally copies your callback code ```clicked($event)```, so the $event is hard coded to that value. It looks like this ```self.parentView.context.clicked($event)```. If you use a custom name instead of $event, say ```event123```, Angular will check componentInstance.event123 property and pass that as the param - which will probably be null/undefined. It's similar behaviour to using HTML inline handlers `````` where only the exact text ```event``` can be used – Drenai Nov 14 '17 at 16:33
  • @Brian We generally do not pass `event` argument as part of attribute value, but handler does have that argument `function clickHandler(event){..}`(if required). I think OP should know, how events work in DOM, as shown [here](https://github.com/shamhub/Front-end-programming/blob/master/4_Javascript_Programming/Topic8_DOM_Access/DOM_interface_hierarchy.png) – overexchange Nov 16 '17 at 01:54
  • 1
    @overexchange You have to pass the 'event' argument from the element's attribute ```onclick="clickHandler(event)"```, or the event will not be passed to the handler in the JS file. http://plnkr.co/edit/9oOCztMuaq7rkowdHsGT?p=preview That ties in very closely with how Angular is behaving in this instance – Drenai Nov 16 '17 at 15:42

3 Answers3

45

$event is the event itself.

The event binding (someevent) allows to bind to DOM events and to EventEmitter events. The syntax is exactly the same.

For DOM events $event is the MouseEvent, KeyboardEvent, or the event value of the type of whatever event you listen to.

For EventEmitter events the emitted value is available as $event

Assuming this example $event refers to the emitted Ferrari car instance:

@Output() carChange:EventEmitter<Car> = new EventEmitter<Car>();

someMethod() {
  this.carChange.emit(new Car({name: 'Ferrari'}));
}

If you don't use $event like in (click)="clicked()" then the event value is not passed.

Actually as far as I remember it is still passed in some browsers but not in all (don't remember which ones)

But if you use Angulars WebWorker feature, then your method might not get the fired or emitted event if you don't explicitely list it.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I think `$event` is one of the type of events(`UIEvent`/`MouseEvent` ) in this [hierarchy](https://github.com/shamhub/Front-end-programming/blob/master/4_Javascript_Programming/Topic8_DOM_Access/DOM_interface_hierarchy.png). Is that correct? – overexchange Nov 16 '17 at 01:43
  • In the browser it's `MouseEvent` for `(click)`, for outputs, it can be any type. – Günter Zöchbauer Nov 16 '17 at 04:04
  • `click= f()`In HTML with JavaScript, we do no pass `event` in the handler. But the handler definition does have the parameter. `function f(e){.... }` – overexchange Nov 16 '17 at 04:37
  • I've also seen this approach, passing `this`: ` (selected_course)="changed(this)"`. Does that reference the component or event? – span May 18 '19 at 08:05
  • The component, but that's usually pointless because the handler has access to `this` anyway, except perhaps if you don't use arrpw functions. – Günter Zöchbauer May 18 '19 at 09:03
  • Is there any syntax for this `$` thing? – Minh Nghĩa Sep 24 '19 at 10:02
  • 1
    @MinhNghĩa what do you mean with "syntax"? It's just an identifier available in the scope of the event binding expression. – Günter Zöchbauer Sep 24 '19 at 10:05
  • I thought the codes between the quotes are pure JS. Thanks for pointing it out for me. – Minh Nghĩa Sep 24 '19 at 10:13
  • No, they are Angular specific, but most TypeScript (and JS) expressions work. The scope is limited to the component (you can't use types (like `new Foo()`) or casting or enums (workarounds exists with functions, getters, fields in the component or pipes) or anything else from the global scope. Additionally the `?.` (safe-navigation operator) is supported. – Günter Zöchbauer Sep 24 '19 at 10:19
  • this video beautifully explains the use of event handling: https://www.youtube.com/watch?v=ZfIc1_oj7uM&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ&index=9 – Akarsh Jain Jun 05 '20 at 10:35
2

If you don't pass the $event in your template, then you won't have the $event variable in your clicked() method available.

See this Plunker for a quick comparison

Maximilian Riegler
  • 22,720
  • 4
  • 62
  • 71
  • 2
    Haha, it did back then. Looking at the default Plunker SystemJS `config.js` it seems, that it always uses the most current Angular 2 version. Where did `bootstrap` move to? I didn't follow the TS development for a while since I switched to the Dart version. Thanks to zoechi for enlightening me :D – Maximilian Riegler Sep 02 '16 at 10:58
0

it holds all the values of an event. Like if you give an input what was the input.

Sayu Paudel
  • 1