1.鼠标常用事件

鼠标控制事件，是指通过鼠标操作，来控制显示元素的变化。

（1）click

介绍

当点击显示元素时，会发生click事件

使用方法

  1. var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);    
  2. app.stage.addChild(bg);    
  3. bg.interactive = true;
  4. bg.on(“click”,函数名);


2

（2）mousemove

介绍

当鼠标指针在指定显示元素中移动想时，会发生mousemove事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);    
app.stage.addChild(bg);    
bg.interactive = true;
bg.on(“mousemove”,函数名);

（3）mousedown

介绍

当在显示元素上，按下鼠标按键时，会发生mousedown事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);    
app.stage.addChild(bg);    
bg.interactive = true;
bg.on(“mousedown”,函数名);

（4）mouseup

介绍

当在显示元素上，松开鼠标按键时，会发生mouseup事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);    
app.stage.addChild(bg);    
bg.interactive = true;
bg.on(“mouseup”,函数名);

（5）mouseover

介绍

当鼠标指针，进入显示元素上方时，会发生mouseover事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);    
app.stage.addChild(bg);    
bg.interactive = true;
bg.on(“mouseover”,函数名);

（6）mouseout

介绍

当鼠标指针从显示元素上离开时，会发生mouseout事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);    
app.stage.addChild(bg);    
bg.interactive = true;
bg.on(“mouseout”,函数名);

2.触屏常用事件

触屏事件，是指通过手指触碰屏幕，来控制显示元素的变化

1) touchstart

介绍

当手指触摸屏幕时，会发生touchstart事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);
app.stage.addChild(bg);
bg.interactive = true;
bg.on(“touchstart”,函数名);

2) touchend

介绍

当手指离开屏幕时，会发生touchend事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);
app.stage.addChild(bg);
bg.interactive = true;
bg.on(“touchend”,函数名);

3) touchmove

介绍

当手指在屏幕上滑动时，会发生touchmove事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);
app.stage.addChild(bg);
bg.interactive = true;
bg.on(“touchmove”,函数名);

3.鼠标控制事件的使用

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);

var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
app.stage.addChild(bg);

var feiji = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(feiji);

bg.interactive = true;
bg.on("click", move);
function move(){
    feiji.x += 10;
}

(1)允许图片接收控制

bg.interactive = true;
设置bg显示元素，是否可以进行交互事件的开关。
当该值等于 true 时，on 监听事件有效。

(2)给图片bg添加click鼠标事件

bg.on(“click”, move);
指定，当图片bg被点击时，通知计算机执行 move 函数的内容。
click：代表控制事件的名称
move：代表执行函数的名称

(3)定义move函数，让飞机移动

function move(){
feiji.x += 10;
}
当点击bg图片时，计算机会执行move函数中的内容。
function：代表定义一个函数
move：代表函数的名称
左花括号：代表函数的开始
右花括号：代表函数的结束
feiji.x += 10：是函数中的内容，作用是让图片feiji的x坐标每次增加10像素

4.触屏事件的使用

示例（建议：通过电脑和手机分别访问该示例）

var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);

var bg = new PIXI.Sprite.fromImage("res/lianxi/carplay/bj.png");
app.stage.addChild(bg);

var car = new PIXI.Sprite.fromImage("res/lianxi/carplay/car.png");
car.anchor.set(0.5,0.5);
car.x = 250;
car.y = 500;
app.stage.addChild(car);

bg.interactive = true;
bg.on("touchstart",moveCar);
bg.on("click",moveCar);
function moveCar(){
    car.y -= 10;
}

代码讲解

1、允许图片接收控制

bg.interactive = true;
设置bg显示元素，是否可以进行交互事件的开关。
当该值等于 true 时，on 监听事件有效。

2、给图片bg添加事件

bg.on(“touchstart”,moveCar);
给图片bg添加touchstart事件，让程序识别触屏操作
bg.on(“click”,moveCar);
给图片bg添加click事件，让程序识别鼠标操作
注意：给图片bg同时添加click、touchstart事件，是为了让程序同时识别鼠标和触屏的操作。

3、定义moveCar函数，让小车移动

function moveCar(){
car.y -= 10;
}
当点击bg图片时，计算机会执行moveCar函数中的内容。
function：代表定义一个函数
moveCar：代表函数的名称
左花括号：代表函数的开始
右花括号：代表函数的结束
car.y -= 10：是函数中的内容，作用是让图片car的y坐标每次递减10像素