jQuery Mobile 事件学习笔记

1. 点击事件（tap）

tap 事件是 jQuery Mobile 中最常用的一个事件，它会在用户点击一个元素时触发。tap 事件的绑定方法为 .on('tap', function(){})。

实例

在一个 div 元素上绑定 tap 事件，当用户点击这个元素时，会在控制台输出一条信息。

htmlCopy Code
<div id="myDiv">点击我</div>

<script>
  $('#myDiv').on('tap', function(){
    console.log('你点击了 div 元素');
  });
</script>

2. 滑动事件（swipe）

swipe 事件会在用户在一个元素上滑动时触发，它有四个方向：左、右、上、下。swipe 事件的绑定方法为 .on('swipeleft swiperight swipeup swipedown', function(){})。

实例

在一个 div 元素上绑定 swipe 事件，当用户从右往左滑动这个元素时，会在控制台输出一条信息。

htmlCopy Code
<div id="myDiv">滑动我</div>

<script>
  $('#myDiv').on('swipeleft', function(){
    console.log('你从右往左滑动了 div 元素');
  });
</script>

3. 滚动事件（scroll）

scroll 事件会在一个元素出现滚动条时触发，它可以用于监听用户滚动的距离等信息。scroll 事件的绑定方法为 .on('scroll', function(){})。

实例

在一个 div 元素上绑定 scroll 事件，当这个元素被滚动时，会在控制台输出当前的滚动距离。

htmlCopy Code
<div id="myDiv" style="height: 100px; overflow-y: scroll;">
  <p>一段很长的文字</p>
  <p>一段很长的文字</p>
  <!-- 省略若干行 -->
</div>

<script>
  $('#myDiv').on('scroll', function(){
    console.log($(this).scrollTop());
  });
</script>

4. 点击链接事件（vclick）

vclick 事件在 jQuery Mobile 中是专门用于处理移动设备上的点击链接事件的，相较于普通的 click 事件，它有更短的延迟时间。vclick 事件的绑定方法为 .on('vclick', function(){})。

实例

在一个链接上绑定 vclick 事件，当用户点击这个链接时，会在控制台输出一条信息。

htmlCopy Code
<a href="#" id="myLink">点击我</a>

<script>
  $('#myLink').on('vclick', function(){
    console.log('你点击了链接');
  });
</script>

5. 初始化事件（pageinit）

pageinit 事件会在 jQuery Mobile 页面初始化完成后触发，它通常用于执行初始化操作。pageinit 事件的绑定方法为 $(document).on('pageinit', '#pageID', function(){})。

实例

在一个页面上绑定 pageinit 事件，当这个页面初始化完成时，会在控制台输出一条信息。

htmlCopy Code
<div data-role="page" id="myPage">
  <!-- 省略页面内容 -->
</div>

<script>
  $(document).on('pageinit', '#myPage', function(){
    console.log('页面初始化完成');
  });
</script>

以上就是 jQuery Mobile 中常用的几个事件，它们可以大大提升我们处理用户交互的效率。