淺談angularJS中的事件

2019-11-20 09:30:39

字體：大中小

來源：轉載

供稿：網友

什么是事件

•如同瀏覽器響應瀏覽器層的事件，比如鼠標點擊、獲得焦點，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(布爾值)