首页 > 代码库 > angular(20)---事件
angular(20)---事件
Angular的作用域在本质上是分层次的:他们可以通过父子关系很自然地来回沟通。但通常,作用域不共享变量的,他们执行的功能往往各不相同,跟在父树上无关。
在这种情况下,我们可以通过在这个链上传递事件的方式在作用域之间通信。
什么是事件?
Angular应用也可以相应Angular事件,这使得我们可以在应用中嵌套的各组件之间进行通信,即使这些组件在创建时并未考虑到其他组件。
注:Angular事件系统并不与浏览器的事件系统相通,这意味着,我们只能在作用域上监听Angular事件而不是DOM事件。
一个好的经验法则是:
查看将要触发事件的作用域,如果要通知整个事件系统,就要往下传播。
另一方面,如果要提醒一个全局模块,我们最终需要通知高层次的作用域($rootscope),并且需要把事件向上传递。
1、使用$emit来冒泡事件
要把事件沿着作用域链向上配送,就要使用$emit()函数。
当想要跟应用的其他部分交流状态变更时,我们使用$emit(),如果想要跟$rootscope通信,则需要$emit()这个事件。
$emit()方法带有两个参数。
(1)name(字符串)
要发出的事件的名称
(2)args(集合)
一个参数的集合,作为对象传递到事件监听器中。
$emit()方法返回来一个事件对象,从监听器中发出的一切异常都会床底到$exceptionHandler服务中。
2、使用$broadcast向下传递事件
要想把事件向下传递(从父作用域到子作用域),我们使用$broadcase()函数。
$broadcast()方法带有两个参数。
(1)name(字符串)
要发出的事件的名称
(2)args(集合)
一个参数的集合,作为对象传递到事件监听器中。
$broadcast()方法返回来一个事件对象,从监听器中发出的一切异常都会床底到$exceptionHandler服务中。
3、事件监听
我们可以使用$on方法,这个方法为鱼油某个特定名称的事件注册了一个监听器,事件名称就是在Angular中触发的事件类型。
例如,我们可以在路由变更过程被触发时,监听事件:
scope.$on(‘$routeChangeStart‘,
function(evt, next, current) {
// 一个新的路由被触发了
});
4、事件对象
事件对象有以下属性。
1. targetScope (作用域对象)
这个属性是发送或者广播事件的作用域。
2. currentScope (作用域对象)
这个对象包含了当前处理事件的作用域。
3. name (字符串)
这个字符串是触发之后,我们正在处理的事件名称。
4. stopPropagation (函数)
stopPropagation() 函数取消通过 $emit 触发的事件的进一步传播。
5. preventDefault (函数)
preventDefault 把 defaultPrevented 标志设置为 true 。尽管不能停止事件的传播,我们可
以告诉子作用域无需处理这个事件(也就是说,可以安全地忽略它们) 。
6. defaultPrevented (布尔值)
调用 preventDefault() 会把 defaultPrevented 设置为 true 。
$on() 函数返回了一个反注册函数,我们可以调用它来取消监听器。
angular(20)---事件