Angularjs 事件指令详细整理


Posted in Javascript onJuly 27, 2017

Angularjs 事件指令详细整理

ngClick

适用标签:所有
触发条件:单击

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

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

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

ngDblclick

适用标签:所有
触发条件:双击

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

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

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

ngBlur

适用标签:

  • a
  • input
  • select
  • textarea

触发条件:失去焦点

#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
angular.module('learnModule', [])

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

ngFocus

适用标签:

  1. a
  2. input
  3. select
  4. textarea

触发条件:获取焦点

#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
angular.module('learnModule', [])

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

ngChange

适用标签:input
触发条件:model更新

输入框的内容改变并不代表model的值更新。按我的理解,一般当两个状态互相切换时,model值会更新。两个状态我称之为合法状态和不合法状态。

不合法的状态:输入的内容不符合type类型,如email类型。输入的内容不符合校验条件,如ngMinlength。不合法的状态下,model会被更新成undefined。

合法的状态:输入的内容是符合类型和校验条件的。

#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');
      }      
    });

初始化和不初始化text的条件下,change触发是不一样的哦,这里涉及到model初始化和更新机制。

ngCopy

适用标签:

  1. a
  2. input
  3. select
  4. textarea

官方api上说使用的标签是这些,我没明白a和select复制有啥子用。另外,我换个div实际上也能触发copy事件。一般常用的就是input和textarea。

触发条件:复制。鼠标右键复制和快捷键Ctrl+C都会触发。

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

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

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

ngCut

适用标签:

  • a
  • input
  • select
  • textarea

触发条件:剪切。鼠标右键剪切和快捷键Ctrl+X都会触发。

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

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

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

ngPaste

适用标签:

a
input
select
textarea

触发条件:粘贴。鼠标右键粘贴和快捷键Ctrl+V都会触发。

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

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

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

ngKeydown

适用标签:所有

个人感觉还是input和textarea比较常用

触发条件:键盘按键按下

要把$event传过去,一般都是要判断按了哪个按键的。

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

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

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

ngKeyup

适用标签:所有

个人感觉还是input和textarea比较常用

触发条件:键盘按键按下并松开

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

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

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

ngKeypress

适用标签:所有

个人感觉还是input和textarea比较常用

触发条件:键盘按键按下

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

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

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

keydown,keypress,keydown三者区别

引发事件的按键

非字符键不会引发 KeyPress 事件,但非字符键却可以引发 KeyDown 和 KeyUp 事件。

事件引发的时间

KeyDown 和 KeyPress 事件在按下键时发生,KeyUp 事件在释放键时发生。

事件发生的顺序

KeyDown -> KeyPress -> KeyUp。如果按一个键很久才松开,发生的事件为:KeyDown -> KeyPress -> KeyDown -> KeyPress -> KeyDown -> KeyPress -> ... -> KeyUp。

  • KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
  • KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符。
  • KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)。
  • KeyPress 只能捕获单个字符。
  • KeyDown 和KeyUp 可以捕获组合键。
  • KeyPress 可以捕获单个字符的大小写。
  • KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
  • KeyPress 不区分小键盘和主键盘的数字字符。
  • KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
  • 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

ngMousedown

适用标签:所有
触发条件:鼠标按下,左右中间按下都会触发

#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);
      }
    });

ngMouseup

适用标签:所有
触发条件:鼠标按下弹起,左右中间按下弹起都会触发

#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);
      }
    });

ngMouseenter

适用标签:所有
触发条件:鼠标进入

#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');
      }
    });

ngMouseleave

适用标签:所有
触发条件:鼠标离开

#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');
      }
    });

ngMousemove

适用标签:所有
触发条件:鼠标移动

#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');
      }
    });

ngMouseover

适用标签:所有
触发条件:鼠标进入

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持,如有疑问请留言或者到本站社区交流讨论,大家共同进步!

Javascript 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue-test-utils初使用详解
May 23 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 #Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
You might like
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python虚拟环境完美部署教程
2019/08/06 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
库房管理员岗位职责
2014/03/09 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
企业团队精神心得体会
2016/01/19 职场文书