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

最新推荐文章于 2025-08-06 14:36:16 发布

转载最新推荐文章于 2025-08-06 14:36:16 发布 · 46 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaowangba/archive/2012/09/20/6314786.html

文章标签：

#javascript #ViewUI

本文介绍了jQuery中事件绑定的方法，包括bind(), mouseover(), mouseout()等，并展示了如何使用trigger()方法手动触发事件。此外还提到了一些实用的事件绑定模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");

    }

);