Ext Js入门第7篇-Ext js事件处理

最新推荐文章于 2018-05-04 18:42:41 发布

淡忘过去努力未来

最新推荐文章于 2018-05-04 18:42:41 发布

阅读量745

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_29258777/article/details/72677619

版权

web前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.使用Ext.EventManager管理事件处理函数与Ext.EventObject事件对象

Ext.EventManager是专门用于管理事件处理函数的工具类，该工具类包括以下方法：

（1）addListener(String/HTMLElement el,String event,Function handler,[Object scope],[Object options]):为el元素的event事件添加handler事件处理函数

（2）getId(HTMLElement/Ext.dom.Element element):获取element元素ID

（3）getPageX(Object event):获取event事件的X坐标

（4）getPageXY(Object event):获取event事件的X,Y坐标

（5）on():addListener()方法别名

还有很多方法，这里不一一列举了，看代码

<body>
		<div id="scv" style="width: 48px;height: 48px;background-color: red;"></div>
		
	</body>
	<script>
	   //差距变量，如果元素的某个坐标与目标的某个坐标小于noDis,就认为该方向上没有差距
	   var noDis=50;
	   //计算距离函数
	   function hypot(x1,y1,x2,y2){
	   	   return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));
	   }
	   function changeCss(target,xPos,evt){
	   	   //如果垂直方向没有差距，则水平移动
	   	   if(Math.abs(target.getY()-evt.getY())<=noDis){
	   	   	   target.setStyle("background-position",xPos+"50%");
	   	   }
	   	   //向上移动
	   	   else if(target.getY()>evt.getY()&&target.getY()-evt.getY()>noDis){
	   	   	   target.setStyle("background-position",xPos+"25%");
	   	   }
	   	   //向下移动
	   	   else{
	   	   	   target.setStyle("background-position",xPos+"75%");
	   	   }
	   }
	   Ext.onReady(function()
	   {
	   	   //获取scv组件
	   	   var target=Ext.get("scv");
	   	   //设置页面高度和宽度
	   	   Ext.getBody().setStyle("height","1200px")
	   	                .setStyle("width","2400px");
	   	   Ext.EventManager.on(Ext.getBody(),"click",function(evt)
	   	   {
	   	   	   target.stopAnimation();
	   	   	   //设置水平方向上没有差距，则垂直移动
	   	   	   if(Math.abs(target.getX()-evt.getX())<=noDis){
	   	   	   	   //向上移动
	   	   	   	   if(target.getY()>evt.getY()){
	   	   	   	   	   target.setStyle("background-position","0% 0%");
	   	   	   	   }
	   	   	   	   //向下移动
	   	   	   	   else{
	   	   	   	   	   target.setStyle("background-position","0% 100%");
	   	   	   	   }
	   	   	   }
	   	   	   //向左移动
	   	   	   else if(target.getX()>evt.getXType()&&target.getX()-evt.getX()>noDis){
	   	   	   	   changeCss(target,"100%",evt);
	   	   	   }
	   	   	   //向右移动
	   	   	   else{
	   	   	   	   changeCss(target,"0%",evt);
	   	   	   }
	   	   	   //需要移动的距离
	   	   	   var dis=hypot(target.getX(),target.getY(),evt.getX(),evt.getY());
	   	   	   //根据移动距离计算动画所需要的时间
	   	   	   time=dis*20;
	   	   	   target.animate({
	   	   	   	   duration:time,
	   	   	   	   to:{
	   	   	   	   	   x:evt.getX(),
	   	   	   	   	   y:evt.getY()
	   	   	   	   }
	   	   	   });
	   	   });
	   });
	</script>

这节先练习这个例子