浅谈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实现按一下删除键删除整个单词附demo
Sep 05 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 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
Drupal简体中文语言包安装教程
2014/09/27 PHP
php防止用户重复提交表单
2015/11/02 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
python多重继承实例
2014/10/11 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python实现验证码识别
2020/06/15 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
军训感想500字
2014/02/20 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
财务务虚会发言材料
2014/10/20 职场文书
财产分割协议书范本
2014/11/03 职场文书
财务会计实训报告
2014/11/05 职场文书
争做文明公民倡议书
2019/06/24 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书