在元素上添加双重事件是否存在问题?

时间:2016-11-15 09:43:28

标签: jquery

假设我向 node.append("circle") .attr("r", 20) .attr("y", -25) .style("fill", function(d) { return ColorType(d); }) .style("stroke-width",0.5) .style("stroke",'black') .attr("opacity", "1"); 添加了.submit()个事件。如果我将相同的<form>事件多次添加到相同的.submit(),会出现问题吗?

为了澄清,我有一个函数初始化并填充<form>并创建<form>事件。提交.submit()后,我必须重新初始化并重新填充<form>。简单的方法是调用相同的函数来执行此操作但同时在同一<form>上创建.submit()事件 - 这实际上并不是必需的,但是有一个函数可以使两者看起来更具可读性

1 个答案:

答案 0 :(得分:2)

如果你使用jQuery重复添加处理程序,它将被重复添加,因此在事件发生时重复调用(但继续阅读)。例如:

var target = $("#target");
target.on("click", handler);
target.on("click", handler);
target.on("click", handler);

function handler() {
  console.log("handler called");
}
<div id="target">click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在这种情况下要做的简单事情是以某种方式标记您已添加处理程序的元素,以便您知道是否添加它:

var form = $("....");
if (!form.hasClass("has-handler")) {
    form.on("submit", handler).addClass("has-handler");
}

注意:如果您使用相同的功能,则上述情况不适用于此:

var target = document.getElementById("target");
target.addEventListener("click", handler, false);
target.addEventListener("click", handler, false);
target.addEventListener("click", handler, false);

function handler() {
  console.log("handler called");
}
<div id="target">click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>