简洁易懂的jQuery：事件与jQuery

不限于单个ready()事件

请务必记住，您可以根据需要声明任意数量的自定义 ready() 事件。您不限于将单个 .ready() 事件附加到文档。 ready() 事件按照它们包含的顺序执行。

注释：传递 jQuery 函数，一个函数 - 例如jQuery(funciton(){//此处代码}) - 是 jQuery(document).ready() 的快捷方式。

使用bind()和unbind()附加/删除事件

使用 bind() 方法 - 例如jQuery('a').bind('click',function(){}) - 您可以将以下任何标准处理程序添加到适当的 DOM 元素。

• blur
• 焦点
• 加载
• 调整的大小
• scroll
• 卸载
• 卸载前
• click
• dblclick
• mousedown
• mouseup
• mousemove
• 鼠标悬停在
• mouseout
• 更改
• select
• 提交
• keydown
• keypress
• keyup
• 错误

显然，根据 DOM 标准，只有某些处理程序与特定元素一致。

除了这个标准处理程序列表之外，您还可以利用 bind() 附加 jQuery 自定义处理程序 - 例如mouseenter 和 mouseleave - 以及您可能创建的任何自定义处理程序。

要删除标准处理程序或自定义处理程序，我们只需将需要删除的处理程序名称或自定义处理程序名称传递给 unbind() 方法 - 例如jQuery('a').unbind('click').如果没有参数传递给 unbind()，它将删除附加到元素的所有处理程序。

刚才讨论的这些概念在下面的代码示例中得到了表达。

    
    

    

    remove events
    

    
    

注释： jQuery 提供了 bind() 方法的多个快捷方式，用于所有标准 DOM 事件，其中不包括 mouseenter 和 mouseleave 等自定义 jQuery 事件。使用这些快捷方式只需将事件名称替换为方法名称 - 例如.click(), mouseout(), 焦点().

您可以使用 jQuery 将无限的处理程序附加到单个 DOM 元素。

jQuery 提供了 one() 事件处理方法，可以方便地将事件绑定到 DOM 元素上，该事件将被执行一次，然后被删除。 one() 方法只是 bind() 和 unbind() 的包装。

通过短事件方法以编程方式调用特定处理程序

快捷语法 - 例如.click()、mouseout() 和 focus() - 用于将事件处理程序绑定到 DOM 元素，也可用于以编程方式调用处理程序。为此，只需使用快捷事件方法而不向其传递函数即可。理论上，这意味着我们可以将处理程序绑定到 DOM 元素，然后立即调用该处理程序。下面，我通过 click() 事件演示这一点。

    Say Hi
    
    Say Hi
    
    
    

注释： 也可以使用事件 trigger() 方法来调用特定的处理程序 - 例如jQuery('a').click(function(){alert('hi') }).trigger('click').这也适用于命名空间和自定义事件。

jQuery 标准化事件对象

jQuery 根据 W3C 标准规范事件对象。这意味着当事件对象传递给函数处理程序时，您不必担心事件对象的浏览器特定实现（例如 Internet Explorer 的 window.event）。您可以使用事件对象的以下属性和方法，无需担心浏览器差异，因为 jQuery 规范了事件对象。

事件对象属性

• event.type
• event.target
• event.data
• event.latedTarget
• event.currentTarget
• event.pageX
• event.pageY
• event.result
• event.timeStamp

事件对象方法

• event.preventDefault()
• event.isDefaultPrevented()
• event.stopPropagation()
• event.isPropagationStopped()
• event.stopImmediatePropagation()
• event.isImmediatePropagationStopped()

要访问规范化的 jQuery 事件对象，只需传递匿名函数，传递给 jQuery 事件方法，一个名为“event”的参数（或任何您想调用的参数）。然后，在匿名回调函数内部，使用参数来访问事件对象。下面是这个概念的一个编码示例。

Grokking 事件命名空间

通常，我们会在 DOM 中拥有一个对象，该对象需要将多个函数绑定到单个事件处理程序。例如，我们以调整大小处理程序为例。使用 jQuery，我们可以向 window.resize 处理程序添加任意数量的函数。但是，当我们只需要删除其中一个函数而不是全部时，会发生什么情况呢？如果我们使用 $(window).unbind('resize')，则附加到 window.resize 处理程序的所有函数都将被删除。通过命名处理程序（例如 resize.unique），我们可以为特定函数分配一个唯一的钩子以进行删除。

在上面的代码中，我们向调整大小处理程序添加了两个函数。添加的第二个（文档顺序）调整大小事件使用事件命名空间，然后立即使用 unbind() 删除该事件。我这样做是为了表明附加的第一个函数没有被删除。命名空间事件使我们能够标记和删除分配给单个 DOM 元素上同一处理程序的唯一函数。

除了解除与单个 DOM 元素和处理程序关联的特定函数的绑定之外，我们还可以使用事件命名空间来专门调用（使用 trigger()）附加到 DOM 元素的特定处理程序和函数。在下面的代码中，将两个点击事件添加到 , 中，然后使用命名空间，仅调用一个。

    click
    
    

注意：使用的命名空间的深度或数量没有限制 - 例如resize.layout.headerFooterContent。

命名空间是保护、调用、删除插件可能需要的任何独占处理程序的好方法。

命名空间适用于自定义事件和标准事件 - 例如click.unique 或 myclick.unique。

Grokking 活动代表团

事件委托依赖于事件传播（也称为冒泡）。当您单击