1 事件的作用

事件的作用：在组件间进行通信。

2 事件的使用

事件的使用：事件发生者传播事件，事件关心者监听事件，进而在监听事件中进行相应的操作。

2.1 angularjs 事件和 js 事件区别

angularjs 事件和原生 js 事件的不同之处在于，angularjs 事件是通过 scope 来监听和传播的，而 js 原生事件是通过 dom 来监听和传播的。

2.2 angularjs 事件传播

2.2.1 向上传播 scope.$emit

通过 scope.$emit(evtName, data ) 把事件通过作用域链向上传播。

1
2
3

//在与scope在同一个作用域链上的所有父scope，只要通过 scope.$on添加了监听，都会触发监听器的执行
scope.$emit('progressChange', 20);//20即为要传递给监听器的第二个数据参数

2.2.2 向下传播 scope.$broadcast

通过 scope.$broadcast(evtName, data ) 把事件通过作用域链向下传播。

1
2

//在与scope在同一个作用域链上的所有子scope，只要通过 scope.$on添加了监听，都会触发监听器的执行
scope.$broadcast('progressChange', 20);//20即为要传递给监听器的第二个数据参数

2.3 angularjs 事件监听

2.3.1 监听方法

通过 scope.$on(evtName, handleFun) 方法，可以为指定事件注册监听器。

scope.$on函数返回值为反注册函数，我们可以调用它来取消监听器。

var cancelHandle = scope.$on('progressChange', changeHandle);
function handleHandle(evt, data){
	//data为传播者传递过来的数据
	//进行刷新组件内容等操作
}

cancelHandle();//可以取消监听器

2.3.2 事件对象

事件监听器的第一个参数即事件对象，事件对象有以下属性，可以通过事件对象属性对事件进行一些操作。

1、targetScope（作用域对象）

发送或广播事件的作用域

2、currentScope（作用域对象）

当前处理事件的作用域

3、name（字符串）

事件名称

4、stopPropagation（函数）

当事件通过$emit进行传播时，可以通过 stopPropagation 取消后续的传播

5、preventDefault（函数）

preventDafault 执行后不会阻止事件传播，但是会把 defaultPrevented 标记设置为 true，子作用域可以通过此字段来决定是否需要再处理这个事件。

6、defaultPrevented（布尔值）

可以通过 defaultPrevented 来决定是否需要处理此事件

DaMeng

angulerjs 事件