Shulou(Shulou.com)06/03 Report--

This article is to share with you about what event instructions are in Angularjs. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

NgClick

Applicable tags: all

Trigger condition: click

# html click me click me#scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.click = function () {alert ('click');}})

NgDblclick

Applicable tags: all

Trigger condition: double-click

# html click me click me#scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.dblclick = function () {alert ('click');}})

NgBlur

Applicable label:

A

Input

Select

Textarea

Trigger condition: loss of focus

# html link-jacky rose # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.blur = function () {alert ('blur');}})

NgFocus

Applicable label:

A

Input

Select

Textarea

Trigger condition: get focus

# html link-jacky rose # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.focus= function () {alert ('focus');}})

NgChange

Applicable tag: input

Trigger condition: model update

The change in the content of the input box does not mean that the value of the model is updated. As far as I understand it, usually when the two states switch with each other, the model value will be updated. Two states I call legal and illegal.

Illegal status: the input does not match the type type, such as the email type. The input does not meet the verification criteria, such as ngMinlength. In an illegal state, model will be updated to undefined.

Legal status: the input meets the type and verification conditions.

# html # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {/ / $scope.text=''; $scope.change = function () {alert ('change');}})

Change trigger is different when initializing and not initializing text. Here, model initialization and update mechanism are involved.

NgCopy

Applicable label:

A

Input

Select

Textarea

The official api says that these are the tags used. I don't understand the use of an and select replication. In addition, I can actually trigger the copy event by changing the div. Input and textarea are commonly used.

Trigger condition: copy. Both the right mouse button copy and the shortcut key Ctrl+C are triggered.

# html # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.copy = function () {alert ('copy');}})

NgCut

Applicable label:

A

Input

Select

Textarea

Trigger condition: cut. Both the right mouse button cut and the shortcut key Ctrl+X are triggered.

# html # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.cut = function () {alert ('cut');}})

NgPaste

Applicable label:

Ainputselecttextarea

Trigger condition: paste. Both the right mouse button paste and the shortcut key Ctrl+V are triggered.

# html # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.paste = function () {alert ('paste');}})

NgKeydown

Applicable tags: all

Personally, input and textarea are more commonly used.

Trigger condition: keyboard key press

To pass $event, it is usually necessary to determine which button has been pressed.

# html # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.keydown = function ($event) {alert ($event.keyCode);}})

NgKeyup

Applicable tags: all

Personally, input and textarea are more commonly used.

Trigger condition: the keyboard key is pressed and released

# html # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.keyup = function ($event) {alert ($event.keyCode);}})

NgKeypress

Applicable tags: all

Personally, input and textarea are more commonly used.

Trigger condition: keyboard key press

# html # scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.keypress = function ($event) {alert ($event.keyCode);}})

The difference among keydown,keypress,keydown

The button that raised the event

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

The time when the event was triggered

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

The sequence of events.

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

When KeyDown is triggered, KeyUp is not necessarily triggered. When KeyDown is pressed and the mouse is dragged, the KeyUp event will not be triggered.

KeyPress is mainly used to capture numbers (including Shift+ numeric symbols), letters (including case), keypads and other ANSI characters except F1-12, SHIFT, Alt, Ctrl, Insert, Home, PgUp, Delete, End, PgDn, ScrollLock, Pause, NumLock, {menu keys}, {start keys} and direction keys.

KeyDown and KeyUp can usually capture all keyboard keys except PrScrn (special keys for special keyboards are not discussed here).

KeyPress can only capture a single character.

KeyDown and KeyUp can capture key combinations.

KeyPress can capture the case of a single character.

Both KeyDown and KeyUp are the same value for the KeyValue captured by a single character, that is, you cannot determine the case of a single character.

KeyPress does not distinguish between the numeric characters of the keypad and the main keyboard.

KeyDown and KeyUp distinguish the numeric characters of the keypad from the main keyboard.

The PrScrn keys KeyPress, KeyDown and KeyUp cannot be captured.

NgMousedown

Applicable tags: all

Trigger conditions: mouse press, left and right middle press will trigger

# html button#scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.mousedown = function ($event) {alert ($event.which);}})

NgMouseup

Applicable tags: all

Trigger conditions: mouse press and pop up, left and right middle press pop up will trigger

# html button#scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.mouseup = function ($event) {alert ($event.which);}})

NgMouseenter

Applicable tags: all

Trigger condition: mouse entry

# html button#scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.mouseenter = function () {alert ('mouseenter');}})

NgMouseleave

Applicable tags: all

Trigger condition: mouse leaves

# html button#scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.mouseleave = function () {alert ('mouseleave');}})

NgMousemove

Applicable tags: all

Trigger condition: mouse movement

# html button#scriptangular.module ('learnModule', []) .controller (' LearnCtrl', function ($scope) {$scope.mousemove = function () {alert ('mousemove');}})

NgMouseover

Applicable tags: all

Trigger condition: mouse entry

Thank you for reading! This is the end of this article on "what are the event instructions in Angularjs?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.