浅谈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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
jquery validate demo 基础
Oct 29 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
使用Vue实现简单计算器
Feb 25 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 递归效率分析
2009/11/24 PHP
php array的学习笔记
2012/05/10 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
师范生见习自我总结
2015/06/23 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
TV动画《间谍过家家》公开PV
2022/03/20 日漫
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL