AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

AngularJS 事件

2016-03-28 2017
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

这一篇博客为大家介绍一下AngularJS为我们提供的事件指令。

ngBlur

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.blur=function(msg){
                    alert(msg);
                };
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-blur="blur('button1 blur')" type="button" value="button1" />
    </body>

</html>

ngChange

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.counter = 0;
                $scope.change = function() {
                    $scope.counter++;
                };
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
        <label for="ng-change-example1">Confirmed</label><br />
        <tt>counter = {{counter}}</tt><br/>
    </body>

</html>

ngClick

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-click="count = count + 1">Increment</button>
        <span>count: {{count}}</span>
    </body>

</html>

ngCopy

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.copied = false;
                $scope.value = 'copy me';
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-copy="copied=true" ng-model="value"> copied: {{copied}}
    </body>

</html>

ngCut

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.cut = false;
                $scope.value = 'cut me';
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-cut="cut=true" ng-model="value"> cut: {{cut}}
    </body>

</html>

ngDblclick

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-dblclick="count = count + 1">
            Increment (on double click)
        </button> count: {{count}}
    </body>

</html>

ngKeydown

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-keydown="count = count + 1">
        key down count: {{count}}
    </body>

</html>

ngKeypress

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-keypress="count = count + 1">
        key press count: {{count}}
    </body>

</html>

ngKeyup

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <p>Typing in the input box below updates the key count</p>
        <input ng-keyup="count = count + 1"> key up count: {{count}}

        <p>Typing in the input box below updates the keycode</p>
        <input ng-keyup="event=$event">
        <p>event keyCode: {{ event.keyCode }}</p>
        <p>event altKey: {{ event.altKey }}</p>
    </body>

</html>

ngMousedown

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mousedown="count = count + 1">
            Increment (on mouse down)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseenter

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseenter="count = count + 1">
            Increment (when mouse enters)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseleave

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseleave="count = count + 1">
            Increment (when mouse leaves)
        </button>
        count: {{count}}
    </body>

</html>

ngMousemove

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mousemove="count = count + 1">
            Increment (when mouse moves)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseover

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseover="count = count + 1">
            Increment (when mouse is over)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseup

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseup="count = count + 1">
            Increment (on mouse up)
        </button>
        count: {{count}}
    </body>

</html>

ngPaste

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.paste = false;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-paste="paste=true" placeholder='paste here'>
        pasted: {{paste}}
    </body>

</html>
文章标签：
JavaScript
前端开发
蒋固金
目录
相关文章
。思索
|
10月前
NPM——删除已发布的包
NPM——删除已发布的包
。思索
234 1
是阿超
|
Android开发
setOnItemClickListener不起作用解决方法
setOnItemClickListener不起作用解决方法
是阿超
249 2
布客飞龙
|
机器学习/深度学习 人工智能 算法
密钥密码学（二）(4)
密钥密码学（二）
布客飞龙
254 0
土木林森
|
搜索推荐 Linux Perl
【专栏】Linux 中有趣的命令：`cowsay` 是 Linux 中一个趣味命令，可在终端创造“会说话的牛”效果
【4月更文挑战第28天】`cowsay` 是 Linux 中一个趣味命令，可在终端创造“会说话的牛”效果。基本用法是输入 `cowsay "text"`，展示带有文字的奶牛形象。使用 `-f` 可换不同牛的样式，`-e` 改变文字颜色。还有 `cowthink` 让牛思考，`cowbell` 添加铃铛声。可与其他命令结合，如 `grep` 或 `sed`，增加终端互动性与趣味性。不论新手还是老手，`cowsay` 都能为你的终端带来更多乐趣和个性化。
土木林森
296 0
bbpp
|
Java Linux Shell
Nacos安装指南
`Nacos`安装指南包括Windows和Linux两部分。在Windows上，下载Nacos服务端安装包，解压到非中文目录，修改配置文件（如需）并启动服务。通过`startup.cmd -m standalone`启动，然后在浏览器访问`http://127.0.0.1:8848/nacos`。Linux安装涉及安装JDK，上传Nacos安装包，解压并启动服务，使用`sh startup.sh -m standalone`命令。Nacos作为Spring Cloud Alibaba的依赖，需要在项目中引入相关依赖。
bbpp
490 1
技术小达人
|
运维 中间件 Java
淘宝权益玩法平台的Serverless化实践
淘宝权益玩法平台的Serverless化实践
技术小达人
424 0
讓丄帝愛伱
|
数据安全/隐私保护 Python
ansible远程启动程序ansible结束后程序也被关
ansible远程启动程序ansible结束后程序也被关
讓丄帝愛伱
154 0
开发者小助理
|
人工智能 大数据 云栖大会
投票赢卫衣，为爱发电VS绩效晋升你选哪一个？
作为一名开发者，还记得你参与开源项目的初心吗？支撑你参与开源的核心动力是“为爱发电”主动为之，还是被绩效、晋升捆绑束缚的无奈之举？你们的声音需要被聆听！欢迎大家扫码进行投票，投票结果将会在云栖大会开发者舞台——「开源人说」大数据&AI专场进行公布，现场还有更多开源话题的深入探讨！
开发者小助理
2024 4
投票赢卫衣，为爱发电VS绩效晋升你选哪一个？
开发者小助理
|
人工智能 运维 前端开发
参与即有奖｜前端领域主题征文开始啦！
阿里云开发者社区推出“前端技术征文挑战赛”。现面向社区所有开发者征集前端领域技术文章，可以是语言框架的使用技巧，也可以是技术领域的趋势探讨，只要你有干货，那就分享出来！在活动规定时间内前往阿里云开发者社区发文，就有机会获得空气炸锅、社区积分等丰富奖励，参与即可获奖，快来参加吧！
开发者小助理
2104 22
参与即有奖｜前端领域主题征文开始啦！
张谦谦
|
消息中间件 缓存 NoSQL
Java项目经验二：二手车系统
XX二手车的服务贯穿二手车交易各个环节，运用成熟的互联网技术，以海量、真实的二手车信息为基 础，坚持诚信、公正的准则，通过政策解析、价格评估、担保、置换和保险等服务，建立专业、严谨、使用 便捷的交易体系，推动中国二手车行业的良性发展。
张谦谦
321 0