Question

我是一名中级JS程序员，这是一个与PHP不同的世界（特别是当我不是OOP程序员，即使是在PHP中）。

我有兴趣在jQuery中定义自己的事件，作为我编程的简化，我将使用一个简单的例子：

通常表中有记录行。用户想要使一行无效。设置系统，以便在发生这种情况时，该行淡出并消失。我们假设有三种方法可以做到这一点：

点击了无效图标
突出显示的行是 i 或
右键单击并从上下文菜单中选择非活动状态。

我想做的是：

$('.datarow').on('rowinactive',function(){ /* etc */ });

上述三个操作中的任何一个都会将$('#row12345')设置为.inactive，并且事件处理程序会从那里获取它。我看到它，因为你在状态和与国家有关的行动之间有某种分离。

我希望这是一个简单的例子。任何人都可以为此提供一些示例代码吗？

Answer 1

您几乎可以定义任何您喜欢的事件，但这些事件必须在某些事件中触发。

$('.datarow').on('rowinactive',function(e, elem){
    alert(elem.id + ' is inactive');
});

$('table tr').on('click', function() {
    $(this).highlight();
    $('.datarow').trigger('rowinactive', this); // passes the element
});

您也可以将任何参数传递给触发的函数。

FIDDLE

Answer 2

$(function(){
    $("input").on('customEvent',function(){ //define a custom event listener
        $("p").text("hello");
    });
    $("input").trigger('customEvent'); //call the event listener attached to obj. with name 'customEvent'
});

我做了一个你可以和here一起玩的例子。您可以通过这个想法将自定义事件应用于由特定$(...)收集的多个对象。然后，由于每个对象可能与用户具有不同的交互，因此您可以调用操作appropriatley，即输入可能会在customEvent上触发click，而在inactive时触发另一个。{{1}}等。 ..

Answer 3

如果没有标记有点难以帮助，那么我将仅使用假设的“inactivate”图标做一个例子。

$('.inactive-icon').on('click',function(){
    var $row = $(this).closest('.datarow');
    $row.fadeOut(500,function(){
        $row.trigger('inactive'); // ---> it's that simple!
    });
});

$('.datarow').on('inactive',function(){ /* etc */ });

Answer 4

选中Fiddle。

$("tr").bind("fadeOut", function(){ /* code */ });
$("tr").trigger("fadeOut");

jquery定义自定义事件

4 个答案: