浅谈angularJS中的事件


Posted in Javascript onJuly 12, 2016

什么是事件

•如同浏览器响应浏览器层的事件,比如鼠标点击、获得焦点,angular应用也可以响应angular事件

•angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件

事件传播

因为作用域是有层次的,所以我们可以在作用域链上传递事件:

•使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知

$emit()方法带有两个参数:

name  要发出的事件的名称

args   一个参数集合,作为对象传递到事件监听器上

•使用$broadcast向下传递事件,每个注册了监听器的子作用域都会收到这个信息

$broadcast()方法带有两个参数:

name  要广播的事件的名称

args   一个参数集合,作为对象传递到事件监听器上

•使用$on监听事件

$on()方法带有两个参数:

event  事件对象

param  参数集合,$broadcast()、$emit()传递过来的参数集合  示例:

demo.html

 <!doctype html>
 <html ng-app="freefedApp">
   <head>
     <title>angular应用demo</title>
     <script src="angular.js"></script>
     <script src="app.js"></script>
  </head>
  <body>
  <div ng-controller="freefedCtrl">
     <div event-directive change="change(title)"></div>
   </div>
  </body>
 </html>
app.js

 /*声明module*/
 var module = angular.module('freefedApp',[]);

 /*声明控制器*/
 module.controller('freefedCtrl',['$scope',function($scope){
     //监听directiveClick事件
     $scope.$on('directiveClick',function(event,param){
        console.log( param );  // 打印结果 {title : '我是来自指令子级作用域'}
     });

     $scope.change = function(title){
       var result = '请注意接收父级广播';
       //向子级作用域广播parentBroadcast事件
       $scope.$broadcast('parentBroadcast',{msg : result});
     };
 }]);

 /*声明指令*/
 module.directive('eventDirective',function(){
    return {
       scope : {
         change : '&'
       },
      replace : true,
      template : '<a>点我向上冒泡事件</a>',
       link : function( scope,el,attr ){
         el.on('click',function(){
          //向上冒泡directiveClick事件,通知父级作用域
           scope.$emit('directiveClick',{title : '我是来自指令子级作用域'});
         });

        //监听parentBroadcast事件广播
        scope.$on('parentBroadcast',function(event,msg){
           console.log( msg );  //打印结果 { msg : 请注意接收父级广播 }
        });
       }
    };
 });

事件对象属性

$on中的event事件对象属性如下:

•targetScope(作用域对象)

发送或者广播事件的作用域

•currentScope(作用域对象)

当前处理事件的作用域

•name(字符串)

正在处理事件的名称

•stopPropagation(函数)

stopPropagation()函数取消通过$emit触发事件的进一步传播

•preventDefault(函数) preventDefault()把defaultprevented标志设置为true,尽管不能停止事件传播,但是子作用域可以通过defaultprevented标志知道无需处理这个事件

•defaultPrevented(布尔值)

可以通过判断defaultPrevented属性来判断父级传播的事件是否可以去忽略

以上这篇浅谈angularJS中的事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
深入剖析JavaScript面向对象编程
Jul 12 #Javascript
JS及PHP代码编写八大排序算法
Jul 12 #Javascript
微信支付 JS API支付接口详解
Jul 11 #Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 #Javascript
JS判断日期格式是否合法的简单实例
Jul 11 #Javascript
深入浅析JavaScript中的scrollTop
Jul 11 #Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 #Javascript
You might like
php生成缩略图的类代码
2008/10/02 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
详解javascript中的babel到底是什么
2018/06/21 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python中的多重继承实例讲解
2014/09/28 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
采购主管岗位职责
2014/02/01 职场文书
货车司机岗位职责
2014/03/18 职场文书
数字化校园建设方案
2014/05/03 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android