angularjs-常用angular事件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src=‘js/angular.min.js‘> </script>
  <style type="text/css">
   .ng-cloak{display:none;}
  </style>
 </head>
 <body ng-app="hd" ng-cloak class="ng-cloak">
  <div ng-controller="ctrl">
   <input type="button" value="单击" ng-click=‘run()‘/>{{num}}<br />
   <input type="button" value="双击" ng-dblclick="dblrun()"/>{{dblnum}}<br />
   <!--ng-change需要绑定ng-model -->
   数据更改:<input type="text" ng-change="changerun()" ng-model="title"/>{{cnum}}<br />
   失去焦点:<input type="text" ng-blur="blurun()"/>{{bnum}}<br />
   获取焦点:<input type="text" ng-focus="focusrun()"/>{{fnum}}<br />
   按下键盘:<input type="text" ng-keydown="keydown()"/>{{knum}}<br />
   抬起键盘:<input type="text" ng-keyup="keyup()"/>{{kunum}}<br />
   鼠标按下:<input type="text" ng-mousedown="mousedown()"/>{{mdnum}}<br />
   鼠标抬起:<input type="text" ng-mouseup="mouseup()"/>{{munum}}<br />
   鼠标进入: <input type="text" ng-mouseenter="mouseenter()"/>{{menum}}<br />
   鼠标离开: <input type="text" ng-mouseleave="mouseleave()"/>{{mlnum}}<br />
   鼠标移动:<input type="text" ng-mousemove="mousemove()"/>{{mmnum}}<br />
  </div>
  
  <script type="text/javascript">
   var m=angular.module(‘hd‘,[])
   m.controller(‘ctrl‘,[‘$scope‘,function($scope){
    $scope.num=0
    //ng-click方法需要写进$scope中
    $scope.run=function(){$scope.num++}
    $scope.dblnum=0
    $scope.dblrun=function(){$scope.dblnum++}
    $scope.cnum=0
    $scope.changerun=function(){$scope.cnum++}
    $scope.bnum=0
    $scope.blurun=function(){$scope.bnum++}
    $scope.fnum=0
    $scope.focusrun=function(){$scope.fnum++}
    $scope.knum=0
    $scope.keydown=function(){$scope.knum++}
    $scope.kunum=0
    $scope.keyup=function(){$scope.kunum++}
    $scope.mdnum=0
    $scope.mousedown=function(){$scope.mdnum++}
    $scope.munum=0
    $scope.mouseup=function(){$scope.munum++}
    $scope.menum=0
    $scope.mouseenter=function(){$scope.menum++}
    $scope.mlnum=0
    $scope.mouseleave=function(){$scope.mlnum++}
    $scope.mmnum=0
    $scope.mousemove=function(){$scope.mmnum++}
   }])
  </script>
 </body>
</html>
时间: 2024-10-17 03:54:59

angularjs-常用angular事件的相关文章

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

AngularJS常用功能

AngularJS 常用功能 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 1 2 3 4 5 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: 1 <li ng-repeat="person

AngularJS 学习之事件

1.ng-click指令:定义了AngularJS点击事件 <div ng-app="" ng-controller="myCtrl"> <button ng-click="count=count+1">点我!</button> <p>{{count}}</p> </div> 2.隐藏HTML元素: **ng-hide指令用于设置应用部分是否可见 **ng-hide=&quo

angularjs中的事件传播$emit,$broadcast,$on

在这里写的技术点 一部分参考AngularJs权威教程一部分参考的是其它的博主的知识点 事件 :如同浏览器响应浏览器层的事件,比如鼠标点击.页面滚动那样,Angular应用也可以响应Angular事件.       这使我们在我们应用中嵌套各组件之间进行通信,即使这些组件在创建的时候并未考虑其他组件.我们可以认为事件是在应用中传播的事件信息片段,通常包含应用中发生的事件信息 注意: AnjularJs事件系统并不与浏览器中的事件系统相通,这意问着我们只能在作用域上监听Angular事件而不是在D

Angularjs 常用服务 $http $location $anchorScroll $cacheFactory $timeout $interval $sce

Angularjs 常用服务 $http $location$anchorScroll $cacheFactory $timeout $interval $sce学习要点:1. Angularjs 中的 $http 服务2. Angularjs 中的 $location $anchorScroll 服务3. Angularjs 中的 $cacheFactory 服务4. Angularjs 中的 $timeout $interval 服务5. $sce 服务 浏览器简析 html 标签1. An

Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat

javascript常用的事件

常用的事件主要有: (1)单击事件:onclick.用户单击鼠标按键时产生的事件,同时.nclick指定的事件处理程序或代码将被调用执行. (2)改变事件:onchange.当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件. (3)选中事件:onselect.当text或textarea对象中的文字被选中时会引发该事件.如:<ipnut type="text" value="默认信息”onselect=alert(”您选中T文本框

JavaScript中常用的事件

转自:http://www.cnblogs.com/dtdxrk/p/3551454.html 作者:文刀日月 JavaScript中常用的事件 事件委托 可以给元素添加多个事件 var addHandler = function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); //false表示冒泡阶段 }else if(element.atta

js学习总结----移动端事件基础及常用的事件库

一.事件基础 PC:click.mouseover.mouseout.mouseenter.mouseleave.mousemove.mousedown.mouseup.mousewheel.keydown.keyup.load.scroll.blur.focus.change... 移动端:click(单击).load.scroll.blur.focus.change.input(代替keyup.keydown)...TOUCH事件模型(处理单手指操作).GESTURE事件模型(处理多手指操作

常用的事件

<script type="text/javascript"> /* 常用的事件: 鼠标点击相关: onclick 在用户用鼠标左键单击对象时触发. ondblclick 当用户双击对象时触发. onmousedown 当用户用任何鼠标按钮单击对象时触发. onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发. 鼠标移动相关: onmouseout 当用户将鼠标指针移出对象边界时触发. onmousemove 当用户将鼠标划过对象时触发. 焦点相关的: onbl