What exactly $event object do in Angular 2?

Question

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) {
      }
    }

Bascio

@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 – Jackelynjackeroo

Answer 1

$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.

Stolid

I think $event is one of the type of events(UIEvent/MouseEvent ) in this hierarchy. Is that correct? – Jackelynjackeroo

In the browser it's MouseEvent for (click), for outputs, it can be any type. – Newkirk

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){.... } – Jackelynjackeroo

I've also seen this approach, passing this: <mycomponnent> (selected_course)="changed(this)"</mycomponent>. Does that reference the component or event? – Blenny

The component, but that's usually pointless because the handler has access to this anyway, except perhaps if you don't use arrpw functions. – Newkirk

Is there any syntax for this $ thing? – Embody

@MinhNghĩa what do you mean with "syntax"? It's just an identifier available in the scope of the event binding expression. – Newkirk

I thought the codes between the quotes are pure JS. Thanks for pointing it out for me. – Embody

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. – Newkirk

this video beautifully explains the use of event handling: youtube.com/… – Inapplicable

Answer 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

Squally

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 – Squally

Answer 3

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

Premolar