jquery - jquery定义自定义事件

Question

我是一名中级 JS 程序员，它与 PHP 有着天壤之别（尤其是当我不是 PHP 的 OOP 程序员时）。

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

通常，您在表中有多行记录。用户想要使一行处于非活动状态。系统设置为，当这种情况发生时，行淡出并消失。假设可能有 3 种方法可以做到这一点：

1. 点击非活动图标
2. 与突出显示的行命中i或
3. 右键单击并从上下文菜单中选择非活动。

我想做的是：

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

上述三个动作中的任何一个都将设置$('#row12345')为.inactive，并且事件处理程序将从那里获取它。我认为您在状态和与状态相关的操作之间存在某种程度的分离。

我希望这是一个简单的例子。谁能为此提供一些示例代码？

Answer 1

You can define pretty much any event you'd like, but such events would have to be triggered somewhow.

$('.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
});

you can also pass any parameter to the triggered function.

FIDDLE

Answer 2

Without the markup is a bit difficult to help, so i'll make an example using only the hypothetical "inactivate" icon.

$('.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 3

$(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'
});

我做了一个例子，你可以在这里玩。您可以扩展这个想法，将自定义事件应用于特定收集的多个对象$(...)。然后，由于每个对象可能与用户有不同的交互，您可以调用适当的操作，即对于您可能触发的输入customEvent，click而另一个当它是inactive等...

Answer 4

检查这个小提琴。

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