jQuery -- 事件

事件指的是页面对操作者动作的响应。例如鼠标的滑过、点击等都属于动作。

jQuery中常用的事件大体分为鼠标事件、键盘事件、表单事件以及窗口事件这4种，可以说这些类型的事件满足了大部份的需求。

基本事件

jQuery中最基本的事件就是页面完全加载时的ready事件了，这基本上是所有函数的起始。

$("document").ready(function)

----------

$("document").ready(function(){

});
           

鼠标事件

鼠标事件应该算是应用最频繁的事件了，包括鼠标的单击click、双击dblclick、按下mousedown、松开mouseup、鼠标位置mousemove、鼠标滑入mouseover、鼠标滑出mouseout以及和鼠标滑入/滑出相似的mouseenter与mouseleave。

单击与双击

$(document).ready(function(){
    $("#ti1").click(function(){ //鼠标单击事件
        $(this).html("<h3>Click</h3>");
    });
    $("#ti2").dblclick(function(){ //鼠标双击事件
        $(this).html("<h3>Double Click</h3>");
    });
    $(".tc1").mousedown(function(){ //鼠标按下事件
        $(this).html("<h3>MouseDown</h3>");
    });
    $(".tc1").mouseup(function(){ //鼠标松开（弹起）事件
        $(this).html("<h3>MouseUp</h3>");
    });
});
           

其它的几个鼠标事件应用较少，不再赘述，有兴趣的可以去研究一下。

注意一点：mouseover与mouseenter的区别，mouseover在进入被选元素或任意子元素时都会被触发，而mouseenter只有在进行被选元素时才会触发，所以mouseover可能会触发多次（父子元素之间的over/out），而mouseenter只会触发1次。

focus和blur是一对获取/失去焦点的事件，如下所示：

$("input").focus(function(){
        $(this).css("background-color","red");
    });
    $("input").blur(function(){
        $(this).css("background-color","white");
    })
           

表单事件

表单事件应用最多的是submit提交，即表单提交，在许多需要用户注册、填写提交信息的地方都存在表单提交。

submit分为两种，分别是：submit()和submit(function)。用户在提交表单时，可以使用submit()直接提交，也可以使用submit(function)来进行提交，插入一些在提交时想要做的事情。

submit仅适用于表单form。

$(document).ready(function(){
    $("form").submit(function(){
        var n = $("#i_uname").val();
        var p = $("#i_pwd").val();
        alert(n+":"+p);
    });
});
           

示例使用的是submit(function)，在提交的时候输出要提交的数据。

窗口事件

窗口事件针对窗口或元素的尺寸改动、滚动条滑动等情况做出响应，resize事件是日常可能会应用到的事件，它是窗口尺寸变化事件。

当窗口的尺寸发生改变时，修改div元素的背景色为绿色：

$(document).ready(function(){
    $(window).resize(function(){
        $("div").css("background-color","green");
    })
});
           

其它事件

on/off：on用来向指定的元素添加事件，而off则用来移除on添加的事件。bind与on的作用是相同的，不过推荐使用on。

$(document).ready(function(){
    $("p").on("click",function(){
        alert('hello');
    });
    $("#hideshow").click(function(){
        $("p").off("click");
    });
});
           

hover：用来指定元素的两个事件，分别是鼠标滑入元素、鼠标滑出元素。需要注意的是，在jQuery 1.7版本前，该方法触发的是mouseenter和mouseleave事件；而在jQuery 1.8版本后，该方法触发的是mouseover和mouseout事件。

$(document).ready(function(){
    $("form").hover(function(){
        $("div").hide();
    },function(){
        $("div").show();
    });
});
           

event：event应该算是一个对象，它有许多的属性，可以使用它来获取当前的DOM元素、鼠标位置、事件的值等信息。

$(document).ready(function(){
    $("div").mousemove(function(event){
        $("span").html(event.pageX+","+event.pageY);
    });
});
           

change：当元素的值发生改变时触发的事件。

$(document).ready(function(){
    $("input").change(function(){
        $(this).css("background-color","blue");
    });
});