zoukankan      html  css  js  c++  java
  • jQuery-mobile 学习笔记之三(事件监听)

    续上

    触摸事件 - 当用户触摸屏幕时触发(敲击和滑动)
    滚动事件 - 当上下滚动时触发
    方向事件 - 当设备垂直或水平旋转时触发
    页面事件 - 当页面被显示、隐藏、创建、载入以及/或卸载时触发

    一、初始化事件

    1. ready 事件 页面载入完毕

    $(document).ready(function(){
        //your code here...
    });

    2. 页面载入完毕事件二 pageinit

    $(document).on('pageinit','#pageone',function(){
        //your code here...
    });

    3.事件格式

    $(元素).on('事件',funciton(){
       //code here...
    })

    二、触摸事件

    tap          事件在用户敲击某个元素时触发
    taphold      事件在用户敲击某个元素并保持一秒时被触发
    swipe        事件在用户在某个元素上水平滑动超过 30px 时被触发
    swipeleft    事件在用户在某个元素上从左滑动超过 30px 时被触发
    swiperight   事件在用户在某个元素上从右滑动超过 30px 时被触发


    三、滚动事件



    scrollstart 事件在用户開始滚动页面时被触发
         (iOS 设备会在滚动事件发生时冻结 DOM 操作)
    scrollstop 事件在用户停止滚动页面时被触发


    四、方向(横竖屏转动)



    orientationchange 事件在用户垂直或水平旋转移动设备时被触发
    能够通过window.orientation 来检測横屏竖屏

    $(window).on("orientationchange",function(){
      if(window.orientation == 0) // Portrait
      {
        $("p").css({"background-color":"yellow","font-size":"300%"});
      }
      else // Landscape
      {
        $("p").css({"background-color":"pink","font-size":"200%"});
      }
    });

    五、页面事件



    Page Initialization - 在页面创建前,当页面创建时。以及在页面初始化之后
    Page Load/Unload - 当外部页面载入时、卸载时或遭遇失败时
    Page Transition - 在页面过渡之前和之后
    Page Change - 当页面被更改。或遭遇失败时

    【初始化事件】


    pagebeforecreate 当页面即将初始化。而且在 jQuery Mobile 已開始增强页面之前,触发该事件。


    pagecreate 当页面已创建,但增强完毕之前,触发该事件。
    pageinit 当页面已初始化。而且在 jQuery Mobile 已完毕页面增强之后,触发该事件。


    $(document).on("pagebeforecreate",function(event){})

    【载入事件】


    pagebeforeload 在不论什么页面载入请求作出之前触发。


    pageload 在页面已成功载入并插入 DOM 后触发。
    pageloadfailed 假设页面载入请求失败,则触发该事件。默认地,将显示 "Error Loading Page" 消息。

    $(document).on("pageload",function(event,data){})

    【过渡事件】



    pagebeforeshow 在“去的”页面触发,在过渡动画開始前。
    pageshow 在“去的”页面触发,在过渡动画完毕后。
    pagebeforehide 在“来的”页面触发,在过渡动画開始前。


    pagehide 在“来的”页面触发。在过渡动画完毕后。



    $(document).on("pagebeforeshow","#pagetwo",function(){ })














  • 相关阅读:
    28家知名IT公司名称的由来
    URI和URL及URN的区别
    URI和URL及URN的区别
    URI和URL及URN的区别
    程序员如何保护自己的颈椎
    程序员如何保护自己的颈椎
    程序员如何保护自己的颈椎
    ACM2050
    应对百万访问量的epoll模式
    敏捷开发方法(一) Scrum
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/8339839.html
Copyright © 2011-2022 走看看