事件

优质
小牛编辑
130浏览
2023-12-01

Jquery Mobile提供了一些建于本地事件的自定义事件以用来创建一些有用的钩子. 要注意这些事件是建立于各种已存在的触摸事件之上,比如 鼠标和窗口事件,所以你可以通过使用 live() 或者 bind()将他们绑定到其他的Jquery事件

触摸事件 Touch events

tap(轻击):一次快速完整的轻击后触

taphold(轻击不放):轻击并不放(大约一秒)后触

swipe(划动):一秒内水平拖拽大于30PX,同时纵向拖曳小?0px的事件发生时触发

swipeleft(左划):划动事件为向左的方向时触发

swiperight(右划):划动事件为向右的方向时触发

设备方向变化事件 Orientation change event

orientationchange

当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,你的回调函数可以加入第二个参数,作用为描述设备横或纵向的属性,"portrait"?quot;landscape"。这些值也会作为class值加入到html的元素中,使你可以通过css中的选择器改变他们的样式。注意当浏览器不支持orientationChange事件的时候可以通过resize 事件绑定

滚屏事件 Scroll events

scrollstart

当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作,当滚屏结束时按队列执行这些dom操作,我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作

scrollstop

滚屏结束时触发

滚屏事件 Scroll events

scrollstart

当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作,当滚屏结束时按队列执行这些dom操作,我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作

scrollstop

滚屏结束时触发

页面显示/隐藏事件 Page show/hide events

在Jquery Mobile中,无论页面显示或是隐藏,都在该页面触发两个事件。哪个事件被触发取决于页面被显示还是隐藏,所以当页面转场发生时,实际?个事件被触发了,每个页面有两个:

pagebeforeshow:转场之前,页面被显示时触发

pagebeforehide:转场之前,页面被隐藏时触发

pageshow:转场之后,页面被显示时触发

pagehide:转场之后,页面被隐藏时触发

请注意这4个事件都引用了”上一页“,或”下一页“,这取决于哪一页被显示或者隐藏,以及”上一页“或者”下一页“是否存在。(第一个被显示的page并没?quot;上一?quot;可以引用,但是同样会引用一个空的Jquery对象 ),你可以通过将第二个参数作为一个绑定的回调函数访问这一引用

$('div').live('pageshow',function(event, ui){
 alert('This page was just hidden: '+ ui.prevPage);
});

$('div').live('pagehide',function(event, ui){
 alert('This page was just shown: '+ ui.nextPage);
});

而且,务必在 Jquery Mobile 执行前绑定这些函数,以使 他们在初始化页面加载时被调用。在 mobileinit 事件的处理函数中使用它们既可,详情参?a href="globalconfig.html">global config

页面初始化事件 Page initialization events

Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件?例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条

这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化。注以下的页面初始化事件在每个“page”只被触发一次,而显?隐藏 事件则不同,在页面显示或者隐藏的每次,它们都会被触发

pagebeforecreate:页面初始化时,初始化之前触

pagecreate:页面初始化时,初始化之后触

$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});

$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by Jquery Mobile!');
});

注意:通过绑定pagebeforecreate然后return false,你禁止页面插件自己的操作

而且,务必在 Jquery Mobile 执行前绑定这些函数,以使 他们在初始化页面加载时被调用。在 mobileinit 事件的处理函数中使用它们既可,详情参?a href="globalconfig.html">global config

动画事件 Animation Events

Jquery Mobile提供了animationComplete 插件,你可以用来添加或删除一个class来应用CSS转场效果