什麼是事件
•如同瀏覽器響應瀏覽器層的事件，比如滑鼠點擊、獲得焦點，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中的事件就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
