程序媛小琦(移动端)(1)

一移动端事件

• touch类事件
  触摸事件，有touchstart touchmove touchend touchcancel 四种之分
  touchstart：手指触摸到屏幕会触发
  touchmove：当手指在屏幕上移动时，会触发
  touchend：当手指离开屏幕时，会触发
• tap类事件
  触碰事件，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分。
  tap: 手指碰一下屏幕会触发
  longTap: 手指长按屏幕会触发
  singleTap: 手指碰一下屏幕会触发
  doubleTap: 手指双击屏幕会触发代码

二整体布局时，尽量少使用行内样式

这样容易使得整体的项目布局发生混乱，页面布局错误
应当避免使用这种形式的样式布局。

移动端事件代码演示：

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    }
};
var touch = document.getElementById("touch");
EventUtil.addHandler(touch,"touchstart",function(event){
    console.log(event);
})；

// 连续滑动触发
EventUtil.addHandler(window,"touchmove",function(event){
    alert(1);
})；
//当手指从屏幕上离开时触发;
EventUtil.addHandler(window,"touchend",function(event){
    alert(1);
})