Angularjs event directives are sorted out in detail

Angularjs event directives are sorted out in detail

ngClick

Applicable tags: All
Triggering condition: Click

#html
<div ng-controller="LearnCtrl">
  <div ng-click="click()">click me</div>
  <button ng-click="click()">click me</button>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('click');
      }
    });

ngDblclick

Applicable tags: 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>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('click');
      }
    });

ngBlur

Applicable tags:

a
input
select
textarea

Trigger condition: Loss of focus

#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>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('blur');
      }
    });

ngFocus

Applicable tags:

a
input
select
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>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $= function () {
        alert('focus');
      }
    });

ngChange

Applicable tags: input
Trigger condition: model update

Changes in the input box do not mean that the model's value is updated. According to my understanding, generally when two states switch to each other, the model value will be updated. I call the two states legal and illegal states.

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

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

#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-model="text" ng-change="change()" ng-minlength="5"/>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      //$='';
      $ = function () {
        alert('change');
      }      
    });

Under the conditions of initializing and not initializing text, change triggering is different. This involves model initialization and update mechanisms.

ngCopy

Applicable tags:

a
input
select
textarea

The official API says that these are the tags used, and I don’t understand what the copying of a and select is used. In addition, I can actually trigger the copy event if I change the div. Generally, input and textarea are commonly used.

Trigger condition: Copy. Right-click copying and 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>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('copy');
      }
    });

ngCut

Applicable tags:

a
input
select
textarea

Trigger condition: Cut. The right mouse button cut and the shortcut key Ctrl+X will both trigger.

#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-cut="cut()"/>
  <textarea cols="30" rows="10" ng-cut="cut()"></textarea>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('cut');
      }
    });

ngPaste

Applicable tags:

a
input
select
textarea

Trigger condition: paste. The right-click 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>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('paste');
      }
    });

ngKeydown

Applicable tags: All

Personally, input and textarea are more commonly used

Trigger condition: Press the keyboard key

To pass $event, you usually have to determine which key you pressed.

#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-keydown="keydown($event)"/>
  <textarea cols="30" rows="10" ng-keydown="keydown($event)"></textarea>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function ($event) {
        alert($);
      }
    });

ngKeyup

Applicable tags: All

Personally, input and textarea are more commonly used

Trigger condition: Press and release the keyboard key

#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-keyup="keyup($event)"/>
  <textarea cols="30" rows="10" ng-keyup="keyup($event)"></textarea>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function ($event) {
        alert($);
      }
    });

ngKeypress

Applicable tags: All

Personally, input and textarea are more commonly used

Trigger condition: Press the keyboard key

#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-keypress="keypress($event)"/>
  <textarea cols="30" rows="10" ng-keypress="keypress($event)"></textarea>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function ($event) {
        alert($);
      }
    });

The difference between keydown, keypress, and keydown

Keys that raise an event

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

Time of event triggering

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

The order in which events occur

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

After KeyDown is triggered, KeyUp may not be triggered. When KeyDown is pressed and drag the mouse, the KeyUp event will not be triggered.
KeyPress is mainly used to capture ANSI characters except F1-12, SHIFT, Alt, Ctrl, Insert, Home, PgUp, Delete, End, PgDn, ScrollLock, Pause, NumLock, {menu key}, {start key} and arrow keys.
KeyDown and KeyUp can usually capture all keys on the keyboard except PrScrn (special keys for special keyboards are not discussed here).
KeyPress can only capture single characters.
KeyDown and KeyUp can capture key combinations.
KeyPress captures the case of a single character.
KeyDown and KeyUp are both a value for the KeyValue captured by a single character, which means that the case of a single character cannot be judged.
KeyPress does not distinguish between numeric characters from the primary keyboard.
KeyDown and KeyUp distinguish numeric characters from the primary keyboard.
Among them, the PrScrn keys KeyPress, KeyDown and KeyUp cannot be captured.

ngMousedown

Applicable tags: All
Triggering conditions: Press the mouse, press the left and right center will trigger

#html
<div ng-controller="LearnCtrl">
  <button ng-mousedown="mousedown($event)">button</button>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function ($event) {
        alert($);
      }
    });

ngMouseup

Applicable tags: All
Triggering conditions: Press the mouse and bounce it up, and press it between the left and right center will trigger it

#html
<div ng-controller="LearnCtrl">
  <button ng-mouseup="mouseup($event)">button</button>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function ($event) {
        alert($);
      }
    });

ngMouseenter

Applicable tags: All
Triggering condition: mouse entry

#html
<div ng-controller="LearnCtrl">
  <button ng-mouseenter="mouseenter()">button</button>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('mouseenter');
      }
    });

ngMouseleave

Applicable tags: All
Trigger condition: Mouse leaves

#html
<div ng-controller="LearnCtrl">
  <button ng-mouseleave="mouseleave()">button</button>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('mouseleave');
      }
    });

ngMousemove

Applicable tags: All
Trigger condition: Mouse movement

#html
<div ng-controller="LearnCtrl">
  <button ng-mousemove="mousemove()">button</button>
</div>

#script
('learnModule', [])

    .controller('LearnCtrl', function ($scope) {
      $ = function () {
        alert('mousemove');
      }
    });

ngMouseover

Applicable tags: All
Triggering condition: mouse entry

Thank you for reading, I hope it can help you. Thank you for your support for this website. If you have any questions, please leave a message or go to the community of this website to communicate and discuss together, so that everyone can make progress together!