jquery中的事件、手机触屏事件

一、JQ中可进行链式操作，结构层（HTML和css样式） 行为层（代码）分离。

$("#btn1").click(function(){
        console.log(1);
    }).mouseenter(function(){
        console.log(2);
    }).mouseleave(function(){
        console.log(3);
    });

    //事件的对象   event
    $("#btn2").click(function(e){
        console.log(e);      //输出为w.event
        var ele= e.target;    //target:通过事件获取当前操作元素的节点
        console.log(ele);    //输出为button按钮
    });

    //bind方法绑定事件   类似js中的事件监听
    $("btn3").bind("click",function(){
        console.log(1);
    });
    $("#btn3").bind("click",mendth);
    function mendth(){
        console.log(2);
    }
    $("#btn3").bind("click",2,function(e){
        console.log(e);
        console.log(event);
    });
    $("#btn3").bind("click mouseleave",function(e){    //一次性绑定多个事件
        console.log(1);
        if(e.type=="click"){      //在同一个方法中区分两个事件
            console.log(2);
        }
        else{
            console.log(3);
        }
    }).unbind("mouseleave");    //移除事件  不带参时会将全部事件都移除
    $("#btn4").click(function(){
        var ele=$("<button>JAVA</button>");
        ele.addClass("btn41");
        $(".block").append(ele);
        $(".btn41").bind("click",function(){    //动态创建的元素，要在追加之后写事件
            console.log(1);
        })
    });
    $("ul li").click(function(){
        $(this).css("backgroundColor","pink");    //$(this)指li，此样式不能用到追加的li上
        var ele=$("<li>JAVA</li>");
        $(this).parent().append(ele);
    });
    $("ul").on("click","li",function(){   //特殊绑定on 可进行事件委托
        $(this).css("color","red");     //$(this)指li，样式可以用到追加的li上
        var ele=$("<li>运维</li>");
        $(this).parent().append(ele);
    });


    $(".b1").hover(function(){    //事件的切换  hover()   进入离开切换
        console.log(1);
    }),function(){
        console.log(2);
    };

    $("#btn5").one("click",function(){    //一次性事件  one()
        console.log(1);
    });

    $("#txt").trigger("select")      //指定事件
             .select(function(){
                $(this).css("background-color","red");
    });

    $("#txt").focus(function(){
        $(this).css("color","blue");
    });
    $("#txt").trigger("focus");     //获焦时自动执行   trigger 触发事件，写在事件之后（写在前面时，需选择才能触发，如上）

    $("#txt").bind("myself",function(e,a,b,c){    //自定义事件
        console.log(a,b,c);
    });
    $("#txt").trigger("myself",[5,6,7]);  //必须写  传参需写成数组形式

二、手机触屏事件（pc端无法操作）touch

共有三个阶段 ：touchstart、touchmove、touchend

、

var startX,startY,moveX,moveY;
    $(".block").bind("touchstart",function(e){
        console.log(e.touches);    //手指坐标
        var touch= e.touches[0];   //有1个手指头
        startX=touch.pageX,startY=touch.pageY;
    }).bind("touchmove",function(e){
        var touch = e.touches[0];
        moveX = touch.pageX, moveY = touch.pageY;
    }).bind("touchend",function(){
        if(moveX-startX<=0){
            console.log("左")
        }
        else{
            console.log("右")
        }
    })