Question

方案：使用jQuery为特定事件完成多个绑定。当事件被触发时，指定的函数应该触发PER触发器。

挑战： jQuery触发器的工作方式是，当调用触发器时，关联函数的触发次数与事件所具有的绑定次数相同。在每个触发器上，该函数只应触发一次。如何实现这一目标。 “one”在场景中不起作用，因为每次触发事件时都应触发该函数。

提前致谢。

更新：为不具体而道歉。

要求是当页面加载时，页面上的不同元素要注册，以便在自定义事件发生时它们将参与其中。

当触发/引发自定义事件时，将调用一个函数，该函数将对所有已注册的元素执行某些任务。

EG。请注意，从不同的部分视图（MVC）嵌入的元素。

<html>
<a href="#" id="triggerelement">Trigger element</a>
<div id="element1" data-join="aevent">something 1</div>
<div id="element2" data-join="aevent">something 2</div>
<div id="element3" data-join="aevent">something 3</div>
<div id="element4" data-join="aevent">something 4</div>
</html>

准备好文件 - 所有带有“data-join”的元素都绑定到事件“aevent”。
当调用trigger（“aevent”）时，绑定函数应该收集所有必须参与“aevent”的元素并对它们执行一些操作。

我遇到的两个问题：

“绑定”到什么元素 - $（？）。bind。原因：多个元素可以引发此自定义事件，并且/不应该知道引发事件的元素。一个想法是 - $（文件）.bind / $（文件）.trigger。这是最好的方法吗？
在调用$（）。trigger时使用jQuery如何确保它只调用每次调用一次而不是绑定到该事件的每个元素。

Answer 1

您是否尝试在绑定函数时使用命名空间？

$('a').bind("click.name1", function() {
    alert("name1");
});
$('a').bind("click.name2", function() {
    alert("name2");
    $("a").unbind("click.name1");
});

http://jsfiddle.net/hssHZ/

Answer 2

我不知道你是否正在考虑这个问题，但这里有一些东西可以让你了解什么是可能的。您可以轻松维护和控制自己的callstack。这将为callstack添加三个函数，当你点击pop链接时，它将执行堆栈顶部的任何内容。

var callstack = [];

function popcallstack(e) 
{
    e.preventDefault();
    return callstack.pop()();
}

//bind once
$('#foo').click(popcallstack);

callstack.push(function() { alert('executed1') });
callstack.push(function() { alert('executed2') });
callstack.push(function() { alert('executed3') });

http://jsfiddle.net/uQumm/1

也许这会给你控制权。哦，你应该知道jQuery基本上会为你做这类事情，如果你想做一些不稳定的事情并且你需要“控制”它，那只是示范性的。

Answer 3

如果您正在使用jQuery，那么会有一个鲜为人知的one（）事件绑定方法来实现一次性事件。

$("#myelement").one( "click", function() { alert("You'll only see this once!"); } );

自行删除处理程序
如果您使用的是原始JavaScript，则任何处理函数都可以使用一行代码删除自身：

document.getElementById("myelement").addEventListener("click", handler);
// handler function
function handler(e) {
    // remove this handler
    e.target.removeEventListener(e.type, arguments.callee);

    alert("You'll only see this once!");
}

假设你的处理程序事件参数名为'e'，行：

e.target.removeEventListener(e.type, arguments.callee);

将在第一次调用时删除处理程序。您为处理程序使用的事件类型或名称无关紧要 - 它甚至可能是一个内联匿名函数。

注意我使用的标准事件调用在IE8及以下版本中无效。 OldIE需要调用detachEvent，类型需要一个“on”前缀，例如“点击”。但是，如果你支持oldIE，你可能正在使用jQuery或你自己的自定义事件处理程序。

如果您需要一些灵活性，自行删除处理程序可能是最佳选择，例如：您只想取消某些事件类型或在不同条件后删除处理程序，例如两次或多次点击。

一次性事件创建功能
你可能太懒或忘了为每个处理函数添加一个事件删除行。让我们创建一个为我们付出艰苦努力的一次性功能：

// create a one-time event
function onetime(node, type, callback) {
    // create event
    node.addEventListener(type, function(e) {
        // remove event
        e.target.removeEventListener(e.type, arguments.callee);
        // call handler
        return callback(e);
    });

}

我们现在可以在需要一次性事件时使用此功能：

// one-time event
onetime(document.getElementById("myelement"), "click", handler);



// handler function
function handler(e) {
    alert("You'll only see this once!");
}

虽然您不会在每个页面都要求一次性事件，但很高兴找到JavaScript开发人员可以使用的几个选项。

jQuery触发器只触发一次函数

3 个答案: