jQuery 事件

ready加载事件

• ready()类似于onload()事件。
• ready()可以写多个，按顺序执行。
• $(document).ready(function(){})等价于${function(){}}

<script type="text/javascript">
    // 文档载入完便触发ready方法。
    $(document).ready(function () {
        console.log("ready go...");
    })
    // $(document).ready(function(){}) == $(function(){})
    $(function () {
        console.log("ready go...");
    });
</script>

绑定事件

常用的事件关键字:

• blur
• focus
• focusin
• focusout
• load
• resize
• scroll
• unload
• click
• dblclick
• mousedown
• mouseup
• mousemove
• mouseover
• mouseout
• mouseenter
• mouseleave
• change
• select
• submit
• keydown
• keypress
• keyup
• error

$("#test").click(function () {
    console.log("点击鼠标了....");
});

$("#test").mouseout(function () {
    console.log("移出鼠标了...");
});

bind(）绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject));

• eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。

  这类类型可以包括如下：

  • blur
  • focus
  • focusin
  • focusout
  • load
  • resize
  • scroll
  • unload
  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • mouseenter
  • mouseleave
  • change
  • select
  • submit
  • keydown
  • keypress
  • keyup
  • error

• [, eventData]：传递的参数，格式：{名：值，名2：值2}

• handler(eventObject)：该事件触发执行的函数。

绑定单个事件

$("#test").bind("click", function () {
    alert("世界会向那些有目标和远见的人让路!!");
});
// 等同于如下原生js
document.getElementById("test").onclick = function () {
    alert("世界会向那些有目标和远见的人让路!!");
}

绑定多个事件

// 绑定click 和 mouseout事件。
$("h3").bind('click mouseout', function () {
    console.log("绑多个事件");
});
// 链式编程。
$("h3").bind('click', function () {
    alert("链式编程1");
}).bind('mouseout', function () {
    $("#slowDiv").show("slow");
});
$("#test").click(function () {
    console.log("点击鼠标了....");
}).mouseout(function () {
    console.log("移出鼠标了...");
});
$("#test").bind({
    click: function () {
        alert("链式编程1");
    },
    mouseout: function () {
        $("#slowDiv").show("slow");
    }
});