5 lines
3.7 KiB
JSON
5 lines
3.7 KiB
JSON
{
|
|
"id": "guide/event-binding-concepts",
|
|
"title": "How event binding works",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/event-binding-concepts.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"how-event-binding-works\">How event binding works<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/event-binding-concepts#how-event-binding-works\"><i class=\"material-icons\">link</i></a></h1>\n<p>In an event binding, Angular configures an event handler for the target event.\nYou can use event binding with your own custom events.</p>\n<p>When the component or directive raises the event, the handler executes the template statement.\nThe template statement performs an action in response to the event.</p>\n<h2 id=\"handling-events\">Handling events<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/event-binding-concepts#handling-events\"><i class=\"material-icons\">link</i></a></h2>\n<p>A common way to handle events is to pass the event object, <code>$event</code>, to the method handling the event.\nThe <code>$event</code> object often contains information the method needs, such as a user's name or an image URL.</p>\n<p>The target event determines the shape of the <code>$event</code> object.\nIf the target event is a native DOM element event, then <code>$event</code> is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/Events\">DOM event object</a>, with properties such as <code>target</code> and <code>target.value</code>.</p>\n<p>In the following example the code sets the <code><input></code> <code>value</code> property by binding to the <code>name</code> property.</p>\n<code-example path=\"event-binding/src/app/app.component.html\" region=\"event-binding-3\" header=\"src/app/app.component.html\">\n<input [value]=\"currentItem.name\"\n (input)=\"currentItem.name=getValue($event.target)\">\n\n</code-example>\n<p>With this example, the following actions occur:</p>\n<ol>\n<li>The code binds to the <code>input</code> event of the <code><input></code> element, which allows the code to listen for changes.</li>\n<li>When the user makes changes, the component raises the <code>input</code> event.</li>\n<li>The binding executes the statement within a context that includes the DOM event object, <code>$event</code>.</li>\n<li>Angular retrieves the changed text by calling <code>getValue($event.target)</code> and updates the <code>name</code> property.</li>\n</ol>\n<p>If the event belongs to a directive or component, <code>$event</code> has the shape that the directive or component produces.</p>\n<div class=\"alert is-helpful\">\n<p>The type of <code>$event.target</code> is only <code>EventTarget</code> in the template.\nIn the <code>getValue()</code> method, the target is cast to an <code>HTMLInputElement</code> to allow type-safe access to its <code>value</code> property.</p>\n<code-example path=\"event-binding/src/app/app.component.ts\" region=\"getValue\">\ngetValue(target: EventTarget): string {\n return (target as HTMLInputElement).value;\n}\n\n</code-example>\n</div>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/event-binding\n-->\n<!-- links from this doc:\n - guide/event-binding-concepts#handling-events\n - guide/event-binding-concepts#how-event-binding-works\n - https://developer.mozilla.org/en-US/docs/Web/Events\n - https://github.com/angular/angular/edit/master/aio/content/guide/event-binding-concepts.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |