Angularjs 이벤트 명령 상세 정리

#html

  
click me
  click me


#script
angular.module('learnModule', [])

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

#html

  
click me
  click me


#script
angular.module('learnModule', [])

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

#html

  link

  
    <select ng-blur="blur()">
    <option>----</option>
    <option>jacky</option>
    <option>rose</option>
  </select>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngFocus</strong><br/> </p> 
 <p> ：</p> 
 <ol> 
  <li>a</li> 
  <li>input</li> 
  <li>select</li> 
  <li>textarea<br/> </li> 
 </ol> 
 <p> ： </p> 
 <div class="jb51code"> 
  <pre><code>
#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()"/>
  <select ng-focus="focus()">
    <option>----</option>
    <option>jacky</option>
    <option>rose</option>
  </select>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngChange</strong><br/> </p> 
 <p> ：input<br/>  ：model </p> 
 <p> model 。 ， ，model 。 。</p> 
 <p> ： type ， email 。 ， ngMinlength。 ，model undefined。</p> 
 <p> ： 。</p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-model="text" ng-change="change()" ng-minlength="5"/>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p> text ，change ， model 。</p> 
 <p><strong>ngCopy</strong><br/> </p> 
 <p> ：</p> 
 <ol> 
  <li>a</li> 
  <li>input</li> 
  <li>select</li> 
  <li>textarea<br/> </li> 
 </ol> 
 <p> api ， a select 。 ， div copy 。 input textarea。</p> 
 <p> ： 。 Ctrl+C 。</p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-copy="copy()"/>
  <textarea cols="30" rows="10" ng-copy="copy()"/>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngCut</strong><br/> </p> 
 <p> ：</p> 
 <ul> 
  <li>a</li> 
  <li>input</li> 
  <li>select</li> 
  <li>textarea<br/> </li> 
 </ul> 
 <p> ： 。 Ctrl+X 。<br/> </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-cut="cut()"/>
  <textarea cols="30" rows="10" ng-cut="cut()"/>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngPaste</strong><br/> </p> 
 <p> ：</p> 
 <div class="jb51code"> 
  <pre><code>
a
input
select
textarea
</code></pre> 
 </div> 
 <p> ： 。 Ctrl+V 。<br/> </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-paste="paste()"/>
  <textarea cols="30" rows="10" ng-paste="paste()"/>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngKeydown</strong><br/> </p> 
 <p> ： </p> 
 <p> input textarea </p> 
 <p> ： </p> 
 <p> $event ， 。</p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-keydown="keydown($event)"/>
  <textarea cols="30" rows="10" ng-keydown="keydown($event)"/>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngKeyup</strong><br/> </p> 
 <p> ： </p> 
 <p> input textarea </p> 
 <p> ： </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-keyup="keyup($event)"/>
  <textarea cols="30" rows="10" ng-keyup="keyup($event)"/>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngKeypress</strong><br/> </p> 
 <p> ： </p> 
 <p> input textarea </p> 
 <p> ： </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <input type="text" ng-keypress="keypress($event)"/>
  <textarea cols="30" rows="10" ng-keypress="keypress($event)"/>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>keydown，keypress，keydown </strong><br/> </p> 
 <p><strong> </strong><br/> </p> 
 <p>  KeyPress  ，  KeyDown   KeyUp  。</p> 
 <p><strong> </strong><br/> </p> 
 <p>KeyDown   KeyPress  ，KeyUp  。</p> 
 <p><strong> </strong><br/> </p> 
 <p>KeyDown -> KeyPress -> KeyUp。 ， ：KeyDown -> KeyPress -> KeyDown -> KeyPress -> KeyDown -> KeyPress -> ... -> KeyUp。</p> 
 <ul> 
  <li>KeyDown ， KeyUp， KeyDown  ， ， KeyUp 。</li> 
  <li>KeyPress ( ： Shift+ )、 （ ： ）、 F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{ }、{ } ANSI 。</li> 
  <li>KeyDown  KeyUp  PrScrn ( ）。</li> 
  <li>KeyPress  。</li> 
  <li>KeyDown  KeyUp  。</li> 
  <li>KeyPress  。</li> 
  <li>KeyDown KeyUp  KeyValue  ， 。</li> 
  <li>KeyPress  。</li> 
  <li>KeyDown  KeyUp  。</li> 
  <li> PrScrn  KeyPress、KeyDown KeyUp  。<br/> </li> 
 </ul> 
 <p><strong>ngMousedown</strong><br/> </p> 
 <p> ： <br/>  ： ， </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <button ng-mousedown="mousedown($event)">button</button>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngMouseup</strong><br/> </p> 
 <p> ： <br/>  ： ， </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <button ng-mouseup="mouseup($event)">button</button>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngMouseenter</strong><br/> </p> 
 <p> ： <br/>  ： </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <button ng-mouseenter="mouseenter()">button</button>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngMouseleave</strong><br/> </p> 
 <p> ： <br/>  ： </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <button ng-mouseleave="mouseleave()">button</button>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngMousemove</strong><br/> </p> 
 <p> ： <br/>  ： </p> 
 <div class="jb51code"> 
  <pre><code>
#html
<div ng-controller="LearnCtrl">
  <button ng-mousemove="mousemove()">button</button>
</div>

#script
angular.module('learnModule', [])

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

</code></pre> 
 </div> 
 <p><strong>ngMouseover</strong><br/> </p> 
 <p> ： <br/>  ： </p> 
 <p>  ， ， ， ， ！</p> 
 <div class="clearfix"> 
  <span id="art_bot" class="jbTestPos"/> 
 </div> 
</div>
                            </div>
                        </div>