下面小編就為大家?guī)?lái)一篇淺談angularJS中的事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
什么是事件
•如同瀏覽器響應(yīng)瀏覽器層的事件，比如鼠標(biāo)點(diǎn)擊、獲得焦點(diǎn)，angular應(yīng)用也可以響應(yīng)angular事件
•angular事件系統(tǒng)并不與瀏覽器的事件系統(tǒng)相通，我們只能在作用域上監(jiān)聽(tīng)angular事件而不是DOM事件
事件傳播
因?yàn)樽饔糜蚴怯袑哟蔚?，所以我們可以在作用域鏈上傳遞事件：
•使用$emit冒泡事件，事件從當(dāng)前子作用域冒泡到賦作用域，在產(chǎn)生事件的作用域之上的所有作用域都會(huì)收到這個(gè)事件的通知
$emit()方法帶有兩個(gè)參數(shù):
name 要發(fā)出的事件的名稱
args 一個(gè)參數(shù)集合，作為對(duì)象傳遞到事件監(jiān)聽(tīng)器上
•使用$broadcast向下傳遞事件,每個(gè)注冊(cè)了監(jiān)聽(tīng)器的子作用域都會(huì)收到這個(gè)信息
$broadcast()方法帶有兩個(gè)參數(shù):
name 要廣播的事件的名稱
args 一個(gè)參數(shù)集合，作為對(duì)象傳遞到事件監(jiān)聽(tīng)器上
•使用$on監(jiān)聽(tīng)事件
$on()方法帶有兩個(gè)參數(shù):
event 事件對(duì)象
param 參數(shù)集合,$broadcast()、$emit()傳遞過(guò)來(lái)的參數(shù)集合 示例：
demo.html
<!doctype html>
<html ng-app="freefedApp">
<head>
<title>angular應(yīng)用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){
//監(jiān)聽(tīng)directiveClick事件
$scope.$on('directiveClick',function(event,param){
console.log( param ); // 打印結(jié)果 {title : '我是來(lái)自指令子級(jí)作用域'}
});
$scope.change = function(title){
var result = '請(qǐng)注意接收父級(jí)廣播';
//向子級(jí)作用域廣播parentBroadcast事件
$scope.$broadcast('parentBroadcast',{msg : result});
};
}]);
/*聲明指令*/
module.directive('eventDirective',function(){
return {
scope : {
change : '&'
},
replace : true,
template : '<a>點(diǎn)我向上冒泡事件</a>',
link : function( scope,el,attr ){
el.on('click',function(){
//向上冒泡directiveClick事件，通知父級(jí)作用域
scope.$emit('directiveClick',{title : '我是來(lái)自指令子級(jí)作用域'});
});
//監(jiān)聽(tīng)parentBroadcast事件廣播
scope.$on('parentBroadcast',function(event,msg){
console.log( msg ); //打印結(jié)果 { msg : 請(qǐng)注意接收父級(jí)廣播 }
});
}
};
});
事件對(duì)象屬性
$on中的event事件對(duì)象屬性如下：
•targetScope(作用域?qū)ο?
發(fā)送或者廣播事件的作用域
•currentScope(作用域?qū)ο?
當(dāng)前處理事件的作用域
•name(字符串)
正在處理事件的名稱
•stopPropagation(函數(shù))
stopPropagation()函數(shù)取消通過(guò)$emit觸發(fā)事件的進(jìn)一步傳播
•preventDefault(函數(shù)) preventDefault()把defaultprevented標(biāo)志設(shè)置為true,盡管不能停止事件傳播，但是子作用域可以通過(guò)defaultprevented標(biāo)志知道無(wú)需處理這個(gè)事件
•defaultPrevented(布爾值)
可以通過(guò)判斷defaultPrevented屬性來(lái)判斷父級(jí)傳播的事件是否可以去忽略
以上這篇淺談angularJS中的事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試