浅谈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 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
JS中数组重排序方法
Nov 11 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
深入剖析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实现图片简单上传
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
Python实现CET查分的方法
2015/03/10 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
pandas 空数据处理方法详解
2019/11/02 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
个人欠条范本
2015/07/03 职场文书
人事任命书范本
2015/09/21 职场文书
礼貌问候语大全
2015/11/10 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS