淺談angularJS中的事件

更新時(shí)間：2016年07月12日 09:04:14 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談angularJS中的事件。小編覺得挺不錯(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)聽angular事件而不是DOM事件

事件傳播

因?yàn)樽饔糜蚴怯袑哟蔚?，所以我們可以在作用域鏈上傳遞事件：

•使用$emit冒泡事件，事件從當(dāng)前子作用域冒泡到賦作用域，在產(chǎn)生事件的作用域之上的所有作用域都會(huì)收到這個(gè)事件的通知

$emit()方法帶有兩個(gè)參數(shù):

name 要發(fā)出的事件的名稱

args 一個(gè)參數(shù)集合，作為對(duì)象傳遞到事件監(jiān)聽器上

•使用$broadcast向下傳遞事件,每個(gè)注冊(cè)了監(jiān)聽器的子作用域都會(huì)收到這個(gè)信息

$broadcast()方法帶有兩個(gè)參數(shù):

name 要廣播的事件的名稱

args 一個(gè)參數(shù)集合，作為對(duì)象傳遞到事件監(jiān)聽器上

•使用$on監(jiān)聽事件

$on()方法帶有兩個(gè)參數(shù):

event 事件對(duì)象

param 參數(shù)集合,$broadcast()、$emit()傳遞過來的參數(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)聽directiveClick事件
     $scope.$on('directiveClick',function(event,param){
        console.log( param );  // 打印結(jié)果 {title : '我是來自指令子級(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 : '我是來自指令子級(jí)作用域'});
         });

        //監(jiān)聽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ù)取消通過$emit觸發(fā)事件的進(jìn)一步傳播

•preventDefault(函數(shù)) preventDefault()把defaultprevented標(biāo)志設(shè)置為true,盡管不能停止事件傳播，但是子作用域可以通過defaultprevented標(biāo)志知道無需處理這個(gè)事件

•defaultPrevented(布爾值)