{"id":50758,"date":"2019-02-28T09:55:27","date_gmt":"2019-02-28T04:25:27","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=50758"},"modified":"2020-01-31T10:48:37","modified_gmt":"2020-01-31T05:18:37","slug":"angularjs-event","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-event\/","title":{"rendered":"AngularJS Event &#8211; List of HTML Event Directives &amp; Event Handling"},"content":{"rendered":"<p>The last session was all about <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/\"><strong>AngularJS dependency Injection<\/strong><\/a>. Today, we will learn what is AngularJS Event. Here, we will cover all the HTML event directives with syntax and examples. Last but not the list, we will study how events handle in angularJS.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-50805\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg\" alt=\"AngularJS Event - List of HTML Event Directives\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<h2>What is AngularJS Event?<\/h2>\n<p><em>When require some advance feature, to create an angular application (advanced) like a mouse click, keyboard presses, changes events, moves etc.\u00a0The advance application focuses on handling DOM events in AngularJS. It provides a model to add\u00a0an event listener in the HTML part.<\/em><\/p>\n<h2>HTML Event Directives used in AngularJS Event<\/h2>\n<p>There are certain <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\"><strong>directives available in angularJS<\/strong><\/a> to provide custom behavior to Dom Elements such as:<\/p>\n<ul>\n<li>ng-blur<\/li>\n<li>ng-change<\/li>\n<li>ng-click<\/li>\n<li>ng-dblclick<\/li>\n<li>ng-focus<\/li>\n<li>ng-keydown<\/li>\n<li>ng-keyup<\/li>\n<li>ng-keypress<\/li>\n<li>ng-mousedown<\/li>\n<li>ng-mouseenter<\/li>\n<li>ng-mouseleave<\/li>\n<li>ng-mousemove<\/li>\n<li>ng-mouseover<\/li>\n<li>ng-mouseup<\/li>\n<\/ul>\n<h3>1. ng-click<\/h3>\n<p>The ng-click directive consists of that particular code when the element will click, it will execute.<\/p>\n<p>For example, we can use the ng-click event in AngularJS, when we click a button to display an alert box.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.16\/angular.min.js\"&gt;\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=\"myapp\" &gt;\r\n&lt;h1&gt;AngularJS ng-click &lt;\/h1&gt;\r\n    &lt;div ng-controller=\"mycontroller\"&gt;\r\n       Enter Name: &lt;input type=\"text\" ng-model=\"text\" \/&gt; &lt;br \/&gt;&lt;br \/&gt;\r\n          &lt;button ng-click=\"Display(text)\"&gt;Show Message&lt;\/button\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\n    var x = angular.module('myapp', []);\r\n    x.controller(\"mycontroller\", function ($scope, $window) {\r\n        $scope.Display = function (v) {\r\n                                   alert(v)\r\n         }\r\n      });\r\n    &lt;\/script&gt;\r\n&lt;\/body&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>AngularJS ng-click<\/p>\n<p><strong>Enter Name:<\/strong><\/p>\n<p>Show Message<\/p>\n<p>Code Explanation<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-modules\/\"><strong>Do you know How to create AngularJS Modules?<\/strong><\/a><\/p>\n<p>When the user clicks on the button show message it will show an alert box displaying the text user\u00a0entered in the text box corresponding to Enter Name field.<\/p>\n<p>In the above code, we can see Display() function attach with $scope\u00a0object in mycontroller, so it will be accessible from button click only. As button control is\u00a0inside mycontroller.<\/p>\n<p><em>Note &#8211; We can use $window service to display an alert.<\/em><\/p>\n<h3>2. ng-dblclick<\/h3>\n<p>The directive ng-dblclick in AngularJS invokes whenever an element with which ng-dblclick is attached is double-clicked. Angular JS will not override the element&#8217;s original<\/p>\n<p>On dblclick event, both are executed consecutively.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body ng-app=\"\"&gt;\r\n&lt;p&gt;Double-click the text Welcome:&lt;\/p&gt;\r\n&lt;h1 ng-dblclick=\"x =x + 1\" ng-init=\"x=0\"&gt;Welcome&lt;\/h1&gt;\r\n&lt;p&gt;The text has been double-clicked {{x}} times.&lt;\/p&gt;\r\n&lt;p&gt; The count of the variable \"x\" increases every time when you double-click the text.&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Double-click the text Welcome:<\/p>\n<p>Welcome<\/p>\n<p>The text has been double-clicked 2 times.<\/p>\n<p>The count of the variable &#8220;x&#8221; increases every time when you double-click the text.<\/p>\n<h3>3. ng-focus<\/h3>\n<p>This directive will execute the particular code when the user focuses on the element with which the ng-focus directive is attached.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body ng-app=\"\" ng-init=\"x=0\"&gt;\r\n&lt;input ng-focus=\"x = x + 1\" \/&gt;\r\n&lt;h1&gt;{{x}}&lt;\/h1&gt;\r\n&lt;p&gt;The value of the variable \"x\" increases every time the input field gets focus.&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>1<\/p>\n<p>The value of the variable &#8220;x&#8221; increases every time the input field gets focus.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-ng-view\/\">Recommended reading &#8211; ng-view in AngularJS<\/a><\/strong><\/p>\n<h3>4. ng-blur<\/h3>\n<p>This directive will execute the particular code when a user loses focuses from the element with which ng-blur directive attach.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body ng-app=\"\"&gt;\r\n&lt;input ng-blur=\"x = x + 1\" ng-init=\"x=0\" \/&gt;\r\n&lt;h1&gt;{{x}}&lt;\/h1&gt;\r\n&lt;p&gt;The value of the variable \"x\" increases every time the input field loses focus.&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>1<\/p>\n<p>The value of the variable &#8220;x&#8221; increases every time the input field loses focus.<\/p>\n<h3>5. mouse events<\/h3>\n<p>It occurs when the control of cursor moves over an element or an element is clicked by mouse event.<\/p>\n<p>The order of mouse event when the cursor moves over an element is:<\/p>\n<ul>\n<li>ng-mouseover<\/li>\n<li>ng-mouseenter<\/li>\n<li>ng-mousemove<\/li>\n<li>ng-mouseleave<\/li>\n<\/ul>\n<p>The order of mouse event when the mouse clicks on an element<\/p>\n<ul>\n<li>ng-mousedown<\/li>\n<li>ng-mouseup<\/li>\n<li>ng-click<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n   &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.16\/angular.min.js\"&gt;&lt;\/script&gt;\r\n   &lt;style&gt;\r\n     .pinkDiv {\r\n         width: 100px;\r\n         height: 70px;\r\n         background-color: pink;\r\n         padding:2px 2px 2px 2px;\r\n       }\r\n      .lightblueDiv {\r\n           width: 120px;\r\n           height: 100px;\r\n           background-color: lightblue;\r\n           padding:2px 2px 2px 2px;\r\n      }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=\"\"&gt;\r\n&lt;h1&gt;AngularJS Mouse Events &lt;\/h1&gt;\r\n    &lt;div ng-class=\"{pinkDiv: enter, lightblueDiv: leave}\" ng- mouseenter=\"enter=true;leave=false;\" ng-mouseleave=\"leave=true;enter=false\"&gt;\r\n     Mouse &lt;span ng-show=\"enter\"&gt;Enter Color changes to pink&lt;\/span&gt; &lt;span ng-show=\"leave\"&gt;Leave color changes to lightblue&lt;\/&lt;meta\u00a0http-equiv=\"content-type\"\u00a0content=\"text html;\u00a0charset=\"utf-8\"\"&gt;span&lt;\/meta\u00a0http-equiv=\"content-type\"\u00a0content=\"text&gt;&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>In the above example, the ng-class directive includes a map of CSS classes, so pinkDiv will be applied if enter=true and lighblueDiv will be applied if leave=true.<\/p>\n<p>The ng-mouseenter directive sets &#8216;enter&#8217; to true, which will apply pinkDiv class to the &lt;div&gt; element. In the same way, ng-mouseleave will set leave to true,\u00a0which will apply lightblueDiv class.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/career-in-angularjs\/\">Have a Look &#8211; Latest Career Opportunities in AngularJS<\/a><\/strong><\/p>\n<h3>6. $event<\/h3>\n<p>When calling the function it can be passed as an argument. It contains the browser\u2019s event object.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n&lt;div ng-app=\"myapp\" ng-controller=\"myctrl\"&gt;\r\n&lt;h1 ng-mousemove=\"myFunc($event)\"&gt;Take Mouse Over Me!&lt;\/h1&gt;\r\n&lt;p&gt;Coordinates are: {{x+ ', ' + y}}&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar p = angular.module('myapp', []);\r\np.controller('myctrl', function($scope) {\r\n  $scope.myFunc = function(myE) {\r\n    $scope.x = myE.clientX;\r\n    $scope.y = myE.clientY;\r\n}\r\n});\r\n&lt;\/script&gt;\r\n&lt;p&gt;The value of clientA and clientB from the event object is displayed whenever mouse is handed over heading \"Take Mouse Over Me!\".&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Take Mouse Over Me!<\/p>\n<p>Coordinates are: 73, 59<\/p>\n<p>The value of clientX and clientY from the event object display whenever a mouse will hand over heading &#8220;Take Mouse Over Me!&#8221;.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-controller\/\">Follow this link to know more about AngularJS Controller<\/a><\/strong><\/p>\n<p>The value of coordinates will get change every time, whenever the mouse is headed over the heading.<\/p>\n<p><strong>Custom Event Directives<\/strong><\/p>\n<p>Using a combination of basic events, angular provides a way to create our own events which are custom events.<\/p>\n<h2>AngularJS Event Handling<\/h2>\n<p>When we will create an advance angularJS application, we require advanced features for that. Therefore, it requires handling of DOM elements like keyboard press, various mouse clicks etc. AngularJS Events can be handled from within directive itself by using the link function. The directive is allowed to attach itself to the DOM elements by the link in an HTML page.<\/p>\n<p><strong>Syntax-<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">link: function ($scope, element, attributes)<\/pre>\n<p>Link is a function that accepts three parameters in it and they are:<\/p>\n<ul>\n<li>Scope<\/li>\n<li>The element with which directive associated<\/li>\n<li>Attributes of the target element<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n   &lt;meta chrset=\"UTF 8\"&gt;\r\n   &lt;title&gt;Event Registration&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;script src=\"https:\/\/code.angularjs.org\/1.6.9\/angular-route.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.angularjs.org\/1.6.9\/angular.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.angularjs.org\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;div ng-app=\"DemoEvent\"&gt;\r\n   &lt;div ng-link=\"\"&gt;Click Here&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    \r\n    var demo = angular.module('DemoEvent',[]);\r\n    demo.directive('ngLink',function(){\r\n       return {\r\n\r\n           link:function($scope,ele,attrs) {\r\n               ele.bind('click',function () {\r\n                  ele.html('You clicked here');\r\n                 });}\r\n             }});\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Click Here<\/p>\n<p>When you click on the text click here the result will be:<\/p>\n<p>You Clicked here<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/\">Let&#8217;s revise &#8211; What is AngularJS HTML DOM?<\/a><\/strong><\/p>\n<h2>Conclusion<\/h2>\n<p>Hence from the above article, we can conclude that event is an action, execute as a result of another source or action such as mouse click. AngularJS provides its own HTML Event Directives such as ng-click, ng-blur, ng-focus etc. We can attach these event directives with HTML elements to perform various functionality.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The last session was all about AngularJS dependency Injection. Today, we will learn what is AngularJS Event. Here, we will cover all the HTML event directives with syntax and examples. Last but not the&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":50805,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[19061,19059,19060,19058,19045,19046,18180,19047,19048,19049,19051,19050,19052,19053,19054,19055,19056,19057],"class_list":["post-50758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs-event-handling","tag-angularjs-event-tutorial","tag-events-in-angularjs","tag-html-event-directives","tag-ng-blur","tag-ng-change","tag-ng-click","tag-ng-dblclick","tag-ng-focus","tag-ng-keydown","tag-ng-keypress","tag-ng-keyup","tag-ng-mousedown","tag-ng-mouseenter","tag-ng-mouseleave","tag-ng-mousemove","tag-ng-mouseover","tag-ng-mouseup"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AngularJS Event - List of HTML Event Directives &amp; Event Handling - DataFlair<\/title>\n<meta name=\"description\" content=\"In this angularjs event tutorial, we will see a list of HTML Event Directives used in events with their syntax, examples and event handling with example\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angularjs-event\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Event - List of HTML Event Directives &amp; Event Handling - DataFlair\" \/>\n<meta property=\"og:description\" content=\"In this angularjs event tutorial, we will see a list of HTML Event Directives used in events with their syntax, examples and event handling with example\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angularjs-event\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-28T04:25:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:18:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Event - List of HTML Event Directives &amp; Event Handling - DataFlair","description":"In this angularjs event tutorial, we will see a list of HTML Event Directives used in events with their syntax, examples and event handling with example","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/angularjs-event\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Event - List of HTML Event Directives &amp; Event Handling - DataFlair","og_description":"In this angularjs event tutorial, we will see a list of HTML Event Directives used in events with their syntax, examples and event handling with example","og_url":"https:\/\/data-flair.training\/blogs\/angularjs-event\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-02-28T04:25:27+00:00","article_modified_time":"2020-01-31T05:18:37+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"AngularJS Event &#8211; List of HTML Event Directives &amp; Event Handling","datePublished":"2019-02-28T04:25:27+00:00","dateModified":"2020-01-31T05:18:37+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/"},"wordCount":790,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg","keywords":["AngularJS Event Handling","AngularJS Event tutorial","Events in AngularJS","HTML Event Directives","ng-blur","ng-change","ng-click","ng-dblclick","ng-focus","ng-keydown","ng-keypress","ng-keyup","ng-mousedown","ng-mouseenter","ng-mouseleave","ng-mousemove","ng-mouseover","ng-mouseup"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angularjs-event\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/","url":"https:\/\/data-flair.training\/blogs\/angularjs-event\/","name":"AngularJS Event - List of HTML Event Directives &amp; Event Handling - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg","datePublished":"2019-02-28T04:25:27+00:00","dateModified":"2020-01-31T05:18:37+00:00","description":"In this angularjs event tutorial, we will see a list of HTML Event Directives used in events with their syntax, examples and event handling with example","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angularjs-event\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/HTML-Event-Directives-used-in-AngularJS-Events.jpg","width":1200,"height":628,"caption":"AngularJS Event - List of HTML Event Directives"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angularjs-event\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"AngularJS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angularjs\/"},{"@type":"ListItem","position":3,"name":"AngularJS Event &#8211; List of HTML Event Directives &amp; Event Handling"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/50758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=50758"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/50758\/revisions"}],"predecessor-version":[{"id":50995,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/50758\/revisions\/50995"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/50805"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=50758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=50758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=50758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}