앵귤러 공부

import {Component} from 'angular2/core';
import {CoursesComponent} from  './courses.component'
import {AuthorsComponent} from './authors.component'

@Component({
    selector: 'my-app',
    template: `<br />
<h1>
{{ title }} </h1>
<div click="" ondivclick="">
<button click="" event="" onclick="">Submit</button>      
    </div>
`,
    directives: [CoursesComponent, AuthorsComponent]
})
export class AppComponent {
    title = "Angular App";
    onClick($event){
        $event.stopPropagation();
        console.log('clicked',$event);
    }
    onDivClick(){

        console.log("Handled by Div");
    }
}



템플릿에 div로 감싼 버튼이 있는데 이 버튼을 클릭하면 디브에 걸어둔 클릭이벤트가 자동으로 실행된다.
이벤트 버블링이라고 하는데 이 버블링을 멈추기 위해서는  버튼에 걸어둔 onClick 메서드에
$event.stopPropagation();을 넣어주면  onDivClick() 메서드는 실행되지 않고 onClick() 메서드만 호출된다.