jQuery 如何为SVG中的对象添加事件监听器

在本文中，我们将介绍如何使用jQuery为SVG（可缩放矢量图形）中的对象添加事件监听器。SVG是一种用于描述二维矢量图形的XML标记语言，可以实现高质量的图形和动画效果。通过添加事件监听器，我们可以使用户与SVG图形进行交互，并执行相应的操作。

阅读更多：jQuery 教程

了解SVG事件模型

在开始为SVG中的对象添加事件监听器之前，我们需要先了解SVG事件模型。SVG事件模型与HTML事件模型类似，分为三个阶段：捕获阶段、目标阶段和冒泡阶段。当用户与SVG对象进行交互时，事件将按照这个顺序在对象的祖先和后代之间传递。

使用jQuery为SVG对象添加事件监听器

要为SVG对象添加事件监听器，我们可以使用jQuery提供的.on()方法。该方法可以在指定的事件类型上绑定一个或多个处理函数，并在事件触发时执行这些处理函数。以下是一个示例，演示如何为SVG中的圆形添加鼠标点击事件监听器：

<svg>
  <circle id="myCircle" cx="50" cy="50" r="20" fill="red" />
</svg>

<script>
("#myCircle").on("click", function() {(this).attr("fill", "blue");
});
</script>

在上面的示例中，我们首先定义了一个SVG圆形对象，并为其指定了id为”myCircle”。然后使用jQuery选择器选中该对象，并使用.on()方法为其绑定了一个鼠标点击事件，匿名回调函数将在点击事件触发时执行。回调函数使用$(this)来指代被点击的圆形对象，并使用.attr()方法将其填充颜色修改为蓝色。

处理SVG中的多个对象

如果SVG中存在多个对象，我们可以通过为它们添加相同的class或属性来批量添加事件监听器。以下是一个示例，展示了如何为SVG中的所有矩形对象添加鼠标悬停事件监听器：

<svg>
  <rect class="myRect" x="10" y="10" width="50" height="50" fill="blue" />
  <rect class="myRect" x="70" y="10" width="50" height="50" fill="green" />
  <rect class="myRect" x="130" y="10" width="50" height="50" fill="red" />
</svg>

<script>
(".myRect").on("mouseover", function() {(this).attr("fill", "yellow");
}).on("mouseout", function() {
  (this).attr("fill",(this).data("original-color"));
}).each(function() {
  (this).data("original-color",(this).attr("fill"));
});
</script>

在上面的示例中，我们定义了三个矩形对象，并为它们添加了相同的class为”myRect”。然后使用jQuery选择器选中这些对象，并使用.on()方法为它们绑定了鼠标悬停事件。匿名回调函数会在鼠标悬停事件触发时执行，并使用$(this)来指代被悬停的矩形对象。在mouseover事件中，填充颜色被修改为黄色；在mouseout事件中，填充颜色被还原为原始颜色，这里我们使用了.data()方法来保存原始颜色。最后，使用.each()方法对每个矩形对象执行操作，将原始颜色保存到.data()中。

子对象和父对象之间的事件传递

在SVG中，子对象和父对象之间的事件传递是自动的。当用户与子对象进行交互时，事件将先在子对象上触发，然后依次在其父对象和祖先对象上触发。以下是一个示例，展示了祖先对象和父对象上的事件处理函数被触发的顺序：

<svg>
  <circle id="myCircle" cx="50" cy="50" r="30" fill="red" />
</svg>

<script>
("#myCircle, svg").on("click", function() {
  alert((this).attr("id"));
});
</script>