Angularjs event commands are detailed, and angularjs event commands

Angularjs event commands are detailed, and angularjs event commands

Angularjs event commands

NgClick

Applicable labels: All
Trigger condition: Click

#html<div ng-controller="LearnCtrl">  <div ng-click="click()">click me</div>  <button ng-click="click()">click me</button></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.click = function () {        alert('click');      }    });    

NgDblclick

Applicable labels: All
Trigger condition: Double-click

#html<div ng-controller="LearnCtrl">  <div ng-dblclick="dblclick()">click me</div>  <button ng-dblclick="dblclick()">click me</button></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.dblclick = function () {        alert('click');      }    });

NgBlur

Applicable labels:

• A
• Input
• Select
• Textarea
  

Trigger condition: the focus is lost.

#html<div ng-controller="LearnCtrl">  <a href="" ng-blur=" rel="external nofollow" blur()">link</a>  <input type="text" ng-blur="blur()"/>  <textarea cols="30" rows="10" ng-blur="blur()"></textarea>  <select ng-blur="blur()">    <option>----</option>    <option>jacky</option>    <option>rose</option>  </select></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.blur = function () {        alert('blur');      }    });

NgFocus

Applicable labels:

1. A
2. Input
3. Select
4. Textarea
   

Trigger condition: Get focus

#html<div ng-controller="LearnCtrl">  <a href="" ng-focus=" rel="external nofollow" focus()">link</a>  <input type="text" ng-focus="focus()"/>  <textarea cols="30" rows="10" ng-focus="focus()"></textarea>  <select ng-focus="focus()">    <option>----</option>    <option>jacky</option>    <option>rose</option>  </select></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.focus= function () {        alert('focus');      }    });

NgChange

Applicable labels: input
Trigger condition: model update

Changing the content of the input box does not mean that the value of the model is updated. In my understanding, the model value is updated when two statuses switch between each other. Two statuses are called legal and illegal.

Invalid status: the input content does not conform to the type, such as the email type. The entered content does not meet the verification conditions, such as ngMinlength. The model is updated to undefined in an invalid state.

Valid status: the input content meets the type and verification criteria.

#html<div ng-controller="LearnCtrl">  <input type="text" ng-model="text" ng-change="change()" ng-minlength="5"/></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      //$scope.text='';      $scope.change = function () {        alert('change');      }          });

The change trigger is different when the text is initialized and not initialized. The model initialization and update mechanisms are involved here.

NgCopy

Applicable labels:

1. A
2. Input
3. Select
4. Textarea
   

These are the tags used by the official api. I don't know what a and select replication are. In addition, changing the div actually triggers the copy event. Generally, input and textarea are commonly used.

Trigger condition: Copy. Right-click replication and the shortcut key Ctrl + C will be triggered.

#html<div ng-controller="LearnCtrl">  <input type="text" ng-copy="copy()"/>  <textarea cols="30" rows="10" ng-copy="copy()"></textarea></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.copy = function () {        alert('copy');      }    });

NgCut

Applicable labels:

• A
• Input
• Select
• Textarea
  

Trigger condition: cut. Right-click cut and the shortcut key Ctrl + X will be triggered.

#html<div ng-controller="LearnCtrl">  <input type="text" ng-cut="cut()"/>  <textarea cols="30" rows="10" ng-cut="cut()"></textarea></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.cut = function () {        alert('cut');      }    });

NgPaste

Applicable labels:

ainputselecttextarea

Trigger condition: paste. Right-click and paste, and the shortcut key Ctrl + V will be triggered.

#html<div ng-controller="LearnCtrl">  <input type="text" ng-paste="paste()"/>  <textarea cols="30" rows="10" ng-paste="paste()"></textarea></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.paste = function () {        alert('paste');      }    });

NgKeydown

Applicable labels: All

I personally think it is more common to use input and textarea.

Trigger condition: press the keyboard button

To pass $ event over, you usually need to determine which button is pressed.

#html<div ng-controller="LearnCtrl">  <input type="text" ng-keydown="keydown($event)"/>  <textarea cols="30" rows="10" ng-keydown="keydown($event)"></textarea></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.keydown = function ($event) {        alert($event.keyCode);      }    });

NgKeyup

Applicable labels: All

I personally think it is more common to use input and textarea.

Trigger condition: Press and release the keyboard.

#html<div ng-controller="LearnCtrl">  <input type="text" ng-keyup="keyup($event)"/>  <textarea cols="30" rows="10" ng-keyup="keyup($event)"></textarea></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.keyup = function ($event) {        alert($event.keyCode);      }    });

NgKeypress

Applicable labels: All

I personally think it is more common to use input and textarea.

Trigger condition: press the keyboard button

#html<div ng-controller="LearnCtrl">  <input type="text" ng-keypress="keypress($event)"/>  <textarea cols="30" rows="10" ng-keypress="keypress($event)"></textarea></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.keypress = function ($event) {        alert($event.keyCode);      }    });

Differences among keydown, keypress, and keydown

Event-triggered buttons

Non-character keys do not trigger KeyPress events, but non-character keys can trigger KeyDown and KeyUp events.

Event-triggered time

KeyDown and KeyPress events occur when the key is pressed, and KeyUp events occur when the key is released.

Event occurrence Sequence

KeyDown-> KeyPress-> KeyUp. If you press a key for a long time, the event is: KeyDown-> KeyPress->...-> KeyUp.

• KeyUp is not necessarily triggered after KeyDown is triggered. When KeyDown is pressed, drag the mouse to trigger the KeyUp event.
• KeyPress is mainly used to capture numbers (Note: including Shift + digit symbols) and letters (Note: including uppercase and lowercase), keypad, in addition to F1-12, SHIFT, Alt, Ctrl, Insert, Home, PgUp, Delete, End, PgDn, ScrollLock, Pause, NumLock, {menu key}, {START key} and ANSI characters outside the direction key.
• KeyDown and KeyUp can usually capture all the buttons except PrScrn (the special keys of the special keyboard are not discussed here ).
• KeyPress can only capture a single character.
• KeyDown and KeyUp can capture the combination of keys.
• KeyPress can capture the case of a single character.
• KeyDown and KeyUp are values for the KeyValue captured by a single character, that is, the case of a single character cannot be determined.
• KeyPress does not distinguish between a keypad and a keyboard's numeric characters.
• KeyDown and KeyUp distinguish between numbers on the keypad and the primary keypad.
• The PrScrn buttons KeyPress, KeyDown, and KeyUp cannot be captured.
  

NgMousedown

Applicable labels: All
Trigger condition: the mouse is pressed, and the left and right buttons are pressed.

#html<div ng-controller="LearnCtrl">  <button ng-mousedown="mousedown($event)">button</button></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.mousedown = function ($event) {        alert($event.which);      }    });

NgMouseup

Applicable labels: All
Trigger condition: When the mouse is pressed, it will be triggered when the middle of the left and right are pressed.

#html<div ng-controller="LearnCtrl">  <button ng-mouseup="mouseup($event)">button</button></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.mouseup = function ($event) {        alert($event.which);      }    });

NgMouseenter

Applicable labels: All
Trigger condition: enter with the mouse

#html<div ng-controller="LearnCtrl">  <button ng-mouseenter="mouseenter()">button</button></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.mouseenter = function () {        alert('mouseenter');      }    });

NgMouseleave

Applicable labels: All
Trigger condition: move the mouse away

#html<div ng-controller="LearnCtrl">  <button ng-mouseleave="mouseleave()">button</button></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.mouseleave = function () {        alert('mouseleave');      }    });

NgMousemove

Applicable labels: All
Trigger condition: move the mouse

#html<div ng-controller="LearnCtrl">  <button ng-mousemove="mousemove()">button</button></div>#scriptangular.module('learnModule', [])    .controller('LearnCtrl', function ($scope) {      $scope.mousemove = function () {        alert('mousemove');      }    });

NgMouseover

Applicable labels: All
Trigger condition: enter with the mouse

Thank you for reading this article. I hope it will help you. Thank you for your support for this site. If you have any questions, please leave a message or go to the community to discuss it and make common progress!