cocos creator 系統事件監聽方法

##guide-demo

•  sys-on-emit(系統事件)

###事件機制說明：

一句話,事件機制可以解決這種需求：

某個條件達成才做某事

node.on('eventName',callback,target);      

參數一：

eventName

 事件名 用于差別監聽的事件類型

參數二: 

callback

 回調函數 當事件名所描述的條件發生時，觸發該函數

參數三：

target

 調用者， 指定調用該回調函數的調用者,通常是回調函數所處的這個對象(this),也可以動态指定别的對象來調用回調函數。

###滑鼠事件

#####'mousedown'

當滑鼠按下時觸發一次

this.node.on('mousedown',function(event){
            this.node.runAction(cc.scaleTo(0.1, 0.8));//尺寸縮小為原來80%
   },this);       

#####'mouseenter'

當滑鼠移入目标節點區域時觸發，不論是否按下

this.node.on('mouseenter',function(event){
             this.node.runAction(cc.rotateTo(0.1,180));//旋轉180度
   },this);      

#####'mousemove'

當滑鼠在目标節點在目标節點區域中移動時觸發，不論是否按下

this.node.on('mousemove',function(event){
            //this.node.runAction(cc.rotateBy(0.1,30));//旋轉30度
  },this);      

#####'mouseleave'

當滑鼠移出目标節點區域時觸發，不論是否按下

this.node.on('mouseleave',function(event){
            this.node.runAction(cc.rotateTo(0.1,0));//旋轉180度複原
   },this);      

#####'mouseup'

當滑鼠從按下狀态松開時觸發一次

this.node.on('mouseup',function(event){
            this.node.runAction(cc.scaleTo(0.1, 1));//尺寸放大為100%
  },this);      

#####'mousewheel'

當滑鼠滾輪滾動時觸發

this.node.on('mousewheel',function(event){
            this.node.runAction(cc.scaleTo(0.1,event.getScrollY()/120));//擷取滾動值來設定大小
  },this);      

###滑鼠事件的回調參數

event

 #####'event.type'

事件類型

 eg: 'mouseup', 'mousemove'

this.node.on('mouseup',function(event){
            let type = event.type;// 'mouseup'
  },this);      

#####'event.getDelta()'

傳回和上一次觸發時滑鼠位置的內插補點

傳回值類型: cc.Vec2()

eg: event.getDelta().x;event.getDelta().y;

this.node.on('mouseup',function(event){
            let delta = event.getDelta();// cc.Vec2();
            let deltaX = delta.x;
            let deltaY = delta.y;
  },this);      

#####'event.getDeltaX()'

傳回和上一次觸發時滑鼠位置X方向上的內插補點

this.node.on('mouseup',function(event){
            let deltaX = event.getDeltaX();
  },this);      

#####'event.getDeltaY()'

傳回和上一次觸發時滑鼠位置Y方向上的內插補點

this.node.on('mouseup',function(event){
            let deltaY = event.getDeltaY();
  },this);      

#####'event.getLocation()'

傳回以目前節點的錨點為坐标原點的滑鼠坐标

傳回值類型: cc.Vec2()

eg: event.getLocation().x;event.getLocation().y;

this.node.on('mouseup',function(event){
            let location = event.getLocation();
            let locationX = location.x;
            let locationY = location.y;
  },this);      

#####'event.getLocationX()'

傳回以目前節點的錨點為坐标原點X方向上的滑鼠坐标

this.node.on('mouseup',function(event){
            let locationX = event.getLocationX();
  },this);      

#####'event.getLocationY()'

傳回以目前節點的錨點為坐标原點Y方向上的滑鼠坐标

this.node.on('mouseup',function(event){
            let locationY = event.getLocationY();
  },this);      

#####'event.getLocationInView()'

傳回以手機螢幕左上(左下？)為坐标原點的滑鼠坐标

傳回值類型: cc.Vec2() 

eg: event.getLocationInView().x;event.getLocationInView().y; 

this.node.on('mouseup',function(event){
            let locationInView = event.getLocationInView();
            let locationInViewX = locationInView.x;
            let locationInViewY = locationInView.y;
  },this);      

#####'event.getScrollX()'

用于'mousewheel'事件 擷取滑鼠滾輪滾動X內插補點？滑鼠滾輪隻能上下滾，也不知道這個怎麼用 預設為0

this.node.on('mouseup',function(event){
            let scrollX = event.getScrollX();
  },this);      

#####'event.scrollY()'

用于'mousewheel'事件 擷取滑鼠滾輪滾動Y內插補點？我的滑鼠上滾動值為120,下滾動值為-120

this.node.on('mouseup',function(event){
            let scrollY = event.getScrollY(); //0(不動滾輪) 或 -120(下滾滾輪) 或 120(上滾滾輪)
  },this);      

###觸摸事件

#####'touchstart'

當手指觸摸到螢幕時(節點範圍内)

this.node.on('touchstart',function(event){
             this.node.runAction(cc.rotateTo(0.1,180));//旋轉180度
            this.node.runAction(cc.scaleTo(0.1, 0.8));//尺寸縮小為原來80%
   },this);      

#####'touchmove'

當手指在螢幕上目标節點區域内移動時

this.node.on('touchmove',function(event){
            //nothing to do 
   },this);      

#####'touchend'

當手指在目标節點區域内離開螢幕時

this.node.on('touchend',function(event){
             this.node.runAction(cc.rotateTo(0.1,0));//旋轉180度複原
             this.node.runAction(cc.scaleTo(0.1, 1));//尺寸放大為100%
   },this);      

#####'touchcancel'

當手指在目标節點區域外離開螢幕時

this.node.on('touchcancel',function(event){
      this.node.runAction(cc.rotateTo(0.1,0));//旋轉180度複原
      this.node.runAction(cc.scaleTo(0.1, 1));//尺寸放大為100%
   },this);      

###觸摸事件的回調參數

event

 #####'event.type'

事件類型

 eg: 'touchmove', 'touchend'

this.node.on('touchmove',function(event){
            let type = event.type;// 'touchmove'
  },this);      

#####'event.touch.getDelta()'

兩次觸發該事件觸摸點的內插補點

this.node.on('touchmove',function(event){
            let delta = event.touch.getDelta();// cc.Vec2()
            let deltaX = delta.x;
            let deltaY = delta.y;
  },this);      

#####'event.touch.getLocation()'

觸摸點位置

this.node.on('touchmove',function(event){
            let location = event.touch.getLocation();// cc.Vec2()
            let locationX = location.x;
            let locationY = location.y;
  },this);      

#####'event.touch.getLocationX()'

觸摸點在X方向的位置

this.node.on('touchmove',function(event){
            let locationX = event.touch.getLocationX();
  },this);      

#####'event.touch.getLocationY()'

觸摸點在Y方向的位置

this.node.on('touchmove',function(event){
            let locationY = event.touch.getLocationY();
  },this);      

#####'event.touch.getLocationInView()'

觸摸點在螢幕坐标的位置

this.node.on('touchmove',function(event){
            let locationInView = event.touch.getLocationInView();
            let locationInViewX = locationInView.x;
            let locationInViewY = locationInView.y;
  },this);      

#####'event.touch.getPreviousLocation()'

和上面一樣？

this.node.on('touchmove',function(event){
            let previousLocation = event.touch.getPreviousLocation();
            let previousLocationX = previousLocation.x;
            let previousLocationY = previousLocation.y;
  },this);      

#####'event.touch.getPreviousLocationInView()'

和上面一樣？用的螢幕坐标？

this.node.on('touchmove',function(event){
            let previousLocationInView = event.touch.getPreviousLocationInView();
            let previousLocationInViewX = previousLocationInView.x;
            let previousLocationInViewY = previousLocationInView.y;
  },this);      

#####'event.touch.getStartLocation()'

觸摸點最開始觸摸的位置(移動觸摸點該值不變)

this.node.on('touchmove',function(event){
            let startLocation = event.touch.getStartLocation();
            let startLocationX = startLocation.x;
            let startLocationY = startLocation.y;
  },this);      

#####'event.touch.getStartLocationInView()'

觸摸點最開始觸摸的位置(移動觸摸點該值不變) 用的螢幕坐标？

this.node.on('touchmove',function(event){
            let startLocationInView = event.touch.getStartLocationInView();
            let startLocationInViewX = startLocationInView.x;
            let startLocationInViewY = startLocationInView.y;
  },this);      

https://github.com/linhaiwei123/cocoscreator-it/tree/master/action/simple-action/assets/sys-on-emit