javascript - Why passing $event in Angular (when dealing with DOM events) is a dubious practice - Stack Overflow

admin管理员组

文章数量:1429746

I was reading Angular 2 documentation where I found:

Passing the $event is not a good practice

Typing the event object reveals a significant objection to passing the entire DOM event into the method: the ponent has too much awareness of the template details. It can't extract information without knowing more than it should about the HTML implementation. That breaks the separation of concerns between the template (what the user sees) and the ponent (how the application processes user data).

For some reason I can't exactly fit my head around what it says. Seems like there are no explanation available either anywhere.

Can someone explain the exact meaning of this in simpler terms (with an example, if possible)?

I was reading Angular 2 documentation where I found:

Passing the $event is not a good practice

Typing the event object reveals a significant objection to passing the entire DOM event into the method: the ponent has too much awareness of the template details. It can't extract information without knowing more than it should about the HTML implementation. That breaks the separation of concerns between the template (what the user sees) and the ponent (how the application processes user data).

For some reason I can't exactly fit my head around what it says. Seems like there are no explanation available either anywhere.

Can someone explain the exact meaning of this in simpler terms (with an example, if possible)?

• javascript
• angular
• events

Share Improve this question Follow edited Apr 17, 2017 at 16:25 snorkpete 14.6k33 gold badges4242 silver badges5757 bronze badges asked Apr 17, 2017 at 15:25 Saurabh TiwariSaurabh Tiwari 5,1811111 gold badges5050 silver badges9090 bronze badges 4

• Could you expand on what you do and don't understand there? For example, do you know what "separation of concerns" means? Have you looked at the next section, which gives an example of the suggested way of doing things, to see how that differs? – jonrsharpe Commented Apr 17, 2017 at 15:28
• @jonsharpe Well what I do understand from separation of concern is an entity should be restricted to do its own job and should not interfere where it should not. However, if I pass an event to ponent, all I am passing is an object which contains data about a single node. Is it really that bad? – Saurabh Tiwari Commented Apr 17, 2017 at 15:31
• Ya I saw at the next section and understood it very well. What I wanted to know is what risk am I taking with the first approach. – Saurabh Tiwari Commented Apr 17, 2017 at 15:32
• added a clarification to the title - passing $event is only a dubious practice when $event refers to a DOM event. If it's a custom event emitter, then $event will be an object in the domain, and it's perfectly fine then. – snorkpete Commented Apr 17, 2017 at 16:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Look at the examples the docs already provide for before and after:

@Component({
  selector: 'key-up1',
  template: `
    <input #box (keyup)="onKey($event)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v1 {
  values = ''; 

  onKey(event: KeyboardEvent) {
    this.values += (<HTMLInputElement>event.target).value + ' | ';
  }
}

Here the ponent has to know that the event has a target, which is an input element, which has a value. Now v2:

@Component({
  selector: 'key-up2',
  template: `
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v2 {
  values = '';

  onKey(value: string) {
    this.values += value + ' | ';
  }
}

Here the template is responsible for extracting the correct value from its own structure, and all the ponent knows is that it's getting a string. Now imagine:

1. You need to change the input element to a select, to restrict the range of inputs. What has to change in each version? Just the template, or does the ponent have to change too?

2. You want to test the handling method. How easy is this for each version? Can you just pass in a string, or do you have to build an event with an element of the appropriate structure?

This is what separation of concerns really means - how far does a change propagate? How much does each piece of your system need to know about the other pieces to continue working? Per Wikipedia, for example:

Of special value is the ability to later improve or modify one section of code without having to know the details of other sections, and without having to make corresponding changes to those sections.

---

However, as snorkpete suggests, note that the reservation around passing $event to ponent methods only applies when $event refers to DOM events. In the case where you're using an EventEmitter to raise your own events, $event will (most likely) be an object from the business domain, and is perfectly fine to use as is.

本文标签： javascriptWhy passing event in Angular (when dealing with DOM events) is a dubious practiceStack Overflow