事件（二）——Jquery事件模型

• bind()方法    

与W3C标准事件API十分相似，除了名称上的不同以外，唯一差别就是去掉了useCapture参数，并且去掉了事件名称中的on前缀。示例代码如下：

$(document).bind(

    "ready",

    function() {

        $("div").bind(

            "mouseover",

            function() {

                $(this).addClass("tmpExampleOver");

        }

        );

        $("div").bind(

            "mouseout",

            function() {

                $(this).removeClass("tmpExampleOver");

        }

        );

    }

);

• 使用单独的事件方法绑定事件

与传统的时间模型不同，Jquery的事件名称没有on前缀，而且可以将多个相同类型的时间挂钩到同一个元素上。示例代码如下：

$(document).ready(

    function() {

        $("div").mouseover(

            function() {

                $(this).addClass("tmpExampleOver");

        }

        );

        $("div").mouseout(

            function() {

                $(this).removeClass("tmpExampleOver");

        }

        );

    }

);

还有一些常用的事件挂钩模式，如hover()方法同时挂钩一个mouseover和mouseout事件，toggle()方法可以挂钩多个事件处理函数，以便交替在不同函数间处理事件。

• 触发事件

使用Jquery的事件API可以将事件处理函数绑定要事件，实际上这些函数可以不依赖任何实际事件的发生而单独触发。从而允许你重用绑定的事件函数来实现其他功能。Jquery甚至还允许将参数传递给事件处理函数。示例程序演示trigger()方法：

$(document).ready(

    function() {

        $("input").focus(

            function() {

                $(this).addClass("tmpFocused");

        }

        );

        $("input").blur(

            function() {

                $(this).removeClass("focus");

        }

        );

        $("input").trigger("focus");

    }

);