浅谈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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
详解Angular2响应式表单
Jun 14 Javascript
Javascript实现基本运算器
Jul 15 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
JS实现放烟花效果
2020/03/10 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python实现京东秒杀功能代码
2019/05/16 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
中学教师实习自我鉴定
2013/09/28 职场文书
服务之星事迹材料
2014/05/03 职场文书
社会工作专业求职信
2014/07/15 职场文书
学生安全责任书范本
2014/07/24 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
社区党员干部承诺书
2015/05/04 职场文书
2016年会开场白台词
2015/06/01 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技