jQuery委托事件

  • Z时代
  • 2024-01-10
  • 分类：综合

示例

让我们从例子开始。这是一个非常简单的HTML示例。

HTML范例

<html>
    <head>
    </head>
    <body>
        <ul>
            <li>
                <a href="some_url/">Link 1</a>
            </li>
            <li>
                <a href="some_url/">Link 2</a>
            </li>
            <li>
                <a href="some_url/">Link 3</a>
            </li>
        </ul>
    </body>
</html>

问题

现在在此示例中，我们想向所有<a>元素添加事件侦听器。问题在于此示例中的列表是动态的。<li>随着时间的流逝，添加和删除元素。但是，页面不会在更改之间刷新，这将使我们能够对链接对象（即）使用简单的click事件监听器。$('a').click()

我们面临的问题是如何向事件<a>元素添加事件。

背景信息-事件传播

仅由于事件传播（通常称为事件冒泡）才可能委派事件。每当触发事件时，事件都会一直冒泡（到达文档根目录）。它们将事件的处理委派给不变的祖先元素，因此将其命名为“委派”事件。

因此，在上面的示例中，clicking<a>元素链接将按以下顺序触发这些元素中的“ click”事件：

  • 一种

  • 里

  • ul

  • 身体

  • html

  • 文件根

解

知道事件冒泡是做什么的，我们可以捕获通过HTML传播的想要的事件之一。

在此示例中捕获<ul>元素的一个好地方是元素，因为该元素不是动态的：

$('ul').on('click', 'a', function () {
  console.log(this.href); // jQuery将事件函数绑定到目标DOM元素
                          // 这样，“ this”是指锚点而不是列表
  // 单击链接后您想做什么
});

在上面：

  • 我们有“ ul”，它是此事件侦听器的接收者

  • 第一个参数（“点击”）定义了我们尝试检测的事件。

  • 第二个参数（'a'）用于声明事件的来源（此事件侦听器的接收者ul下的所有子元素）。

  • 最后，第三个参数是在满足第一个和第二个参数要求的情况下运行的代码。

详细了解解决方案的工作方式

  1. 用户点击次数<a>元素

  2. 触发<a>元素上的点击事件。

  3. 事件开始向文档根目录冒泡。

  4. 事件首先冒泡到<li>元素，然后冒泡到<ul>元素。

  5. 由于<ul>元素已附加事件侦听器，因此将运行事件侦听器。

  6. 事件侦听器首先检测触发事件。冒泡事件是“单击”，而侦听器有“单击”，这是通过。

  7. 侦听器检查尝试将第二个参数（'a'）与气泡链中的每个项目进行匹配。由于链中的最后一项是“ a”，因此与过滤器匹配，这也是通过。

  8. 第三个参数中的代码按原样使用匹配项运行this。如果函数不包含对的调用stopPropagation()，则该事件将继续向上向根（document）传播。

注意：如果没有合适的祖先/祖先，请使用document。由于'body'以下原因，请勿使用：

  • body有一个与样式有关的错误，这可能意味着鼠标事件不会发生。这取决于浏览器，并且可能在计算的主体高度为0（例如，所有子元素都具有绝对位置）时发生。鼠标事件始终会冒泡document。

  • document 脚本始终存在，因此您可以将委托的处理程序附加到支持DOM的处理程序document之外，并确保它们仍然可以工作。

以上是 jQuery委托事件 的全部内容， 来源链接： utcz.com/z/337887.html

回到顶部