pixi.js的显示对象都可以响应鼠标事件，官方的api不好，学习起来着实费劲。
pixi.js中EventEmitter相当于as中的EventDispatcher，所有接受发送事件的对象，都继承自EventEmitter。addListener是在这个类中定义的，但是官方的api中不显示该类的属性和方法。
源码中，EventEmitter = require('eventemitter3');不知道怎么才能导出EventEmitter中的方法。有时间得熟悉熟悉nodejs开发，要不真的落伍了。
发现InteractionManager类，不知道怎么用。
先老老实实学会应用吧。
代码：
<html>
<head>
<title>pixi.js入门-事件</title>
<script type="text/javascript" src="../pixi.js"></script>
<script type="text/javascript">
var frameRate=30;
var renderer;
var stage;
var tf;
var fps=0;
var ticker;
window.onload = function() {
renderer = new PIXI.WebGLRenderer(600, 400,{transparent:true});
document.body.appendChild(renderer.view);
stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('bunny.png');
var sp1 = new PIXI.Sprite(texture);
stage.addChild(sp1);
sp1.x = 200;
sp1.y = 200;
sp1.interactive = true;
stage.interactive = true;
sp1.mousedown =function(e){
console.log("sp1.mousedown");
}
sp1.mouseover=function(e){
console.log("sp1.mouseover");
}
sp1.mouseout=function(e){
console.log("sp1.mouseout");
}
stage.mouseup=function(e){
console.log("stage.mouseup");
}
sp1.click=function(e){
console.log("sp1.click");
}
sp1.touchstart=function(e){
console.log("sp1.touchstart");
}
sp1.touchmove=function(e){
console.log("sp1.touchmove");
}
sp1.touchend=function(e){
console.log("sp1.touchend");
}
sp1.addListener("mousedown",function(e){
console.log("mousedown:",e);
});
sp1.addListener("mouseover",function(e){
console.log("mouseover:",e);
});
sp1.addListener("mouseout",function(e){
console.log("mouseout:",e);
});
stage.addListener("mouseup",function(e){
console.log("mouseup:",e);
});
sp1.addListener("click",function(e){
console.log("click:",e);
});
sp1.addListener("touchstart",function(e){
console.log("touchstart:",e);
});
sp1.addListener("touchmove",function(e){
console.log("touchmove:",e);
});
sp1.addListener("touchend",function(e){
console.log("touchend:",e);
});
tf = new PIXI.Text("fps:0", {
font: '24px Arial',
fill: 0xff1010,
align: 'left'
});
stage.addChild(tf);
refresh();
setInterval(showFps, 1000);
}
function showFps(){
tf.text="fps:"+fps;
fps=0;
}
function refresh(){
fps++;
var t=new Date().getTime();
renderer.render(stage);
t=new Date().getTime()-t;
var delay=1000/frameRate;
if(t>=delay){
refresh();
}
else{
setTimeout(refresh,delay-t);
}
}
</script>
</head>
<body>
</body>
</html>关键在这句，一定要设置为true。
官方API中有这样一句：Any DisplayObject can be interactive if its interactive parameter is set to true。所有DisplayObject都可以交互，但是需要设置interactive 为true。
sp1.interactive = true;
可以使用addListener，也可以直接使用sp1.click，用过js的应该都很熟悉了。
touch事件和mouse事件是分开的，pc端只支持mouse事件，移动端只支持touch事件，不知道能不能像createjs那样，设置一个和开关，开启之后，自动识别并转换mouse和touch事件，这样大多数情况下，开发者就只需要关注逻辑了。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。