HTML5画布的多事件绑定教程
2014-01-01 19:44
423 查看
绑定多个事件与KineticJS单个处理程序,我们可以使用on()方法并传递一个包含多个事件类型的空间分隔的字符串。
产品说明:鼠标悬停、mousedown和mouseup圈观察,函数绑定到每个事件循环执行。
产品说明:鼠标悬停、mousedown和mouseup圈观察,函数绑定到每个事件循环执行。
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div id="container"></div> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script> <script defer="defer"> function writeMessage(message) { text.setText(message); layer.draw(); } var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var text = new Kinetic.Text({ x: 10, y: 10, fontFamily: 'Calibri', fontSize: 24, text: '', fill: 'black' }); var numEvents = 0; var circle = new Kinetic.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2 + 10, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4 }); circle.on('mouseover mousedown mouseup', function() { writeMessage('Multi-event binding! Events: ' + (++numEvents)); }); circle.on('mouseout', function() { writeMessage(''); }); layer.add(circle); layer.add(text); stage.add(layer); </script> </body> </html>
相关文章推荐
- HTML5画布拖放事件教程
- HTML5画布移动触摸事件教程
- HTML5画布路径教程
- HTML5简明教程-1.1.HTML5画布Canvas
- cocos2d-html5 教程 触屏事件
- HTML5画布径向渐变教程
- HTML5画布颜色教程
- 三分钟HTML5画布(Canvas)动画教程
- HTML5画布鼠标坐标教程
- HTML5画布转化图像颜色教程
- HTML5画布全球复合操作教程
- python tkinter教程-事件绑定
- HTML5画布线性渐变教程
- HTML5画布形状填充教程
- TML5画布桌面和移动事件支持教程
- jQuery文本框(input textare)事件绑定方法教程
- HTML5画布模式教程
- HTML5画布文本颜色教程
- HTML5画布椭圆形教程
- HTML5画布定制形状教程