定义自定义事件

Question

我想学习如何定义自定义事件，但并不完全像网上所说的那样！让我举例说明：

在 jQuery 网站的 Introducing Custom Events 部分中，它教您如何在代码中创建自定义事件：

例如

$(document).on('myEvent',function(){
    alert('Hello World');
});

然后在一个事件中，你会调用：

$(document).trigger('myEvent');

好吧，到这里为止没问题。为了更进一步，我必须再举一个例子：

问题：

假设我们已经定义：

$.fn.myEvent=function(callback){
    $(document).bind('contextmenu',this,callback);
};

所以我们可以将其用作：

$(document).myEvent(function(){
    alert('Hello World');
});

我的问题是，我们如何定义 "myEvent" 以便我们可以将其用作：

$(document).on('myEvent',function(){
    alert('Hello World');
});

使用$(document).myEvent(); 的功能，这样我们就可以将回调函数传递给它，而无需实际trigger 事件？

更多解释：

例如，当我们调用$(document).on('click'); 时，我们实际上并不需要像$(document).trigger('click') 那样触发其他地方的点击事件来让它工作，所以只要click 发生，函数就会触发。我想要一个 "myEvent" 的事件监听器，这样当条件匹配时，函数就会触发。

换句话说（正如下面在 cmets 中提到的），我想知道是否有办法让 jQuery 将 "myEvent" 视为默认事件之一（单击、鼠标移动、提交等）。

非常感谢任何答案或想法。

Answer 1

我想为“myEvent”设置一个事件监听器，这样当条件匹配时，函数就会触发。

引擎如何知道您所说的“条件”是什么？不，“自定义事件”之所以称为 custom，是因为它们不是本机触发的（通过一些较低级别的操作），而是由自定义代码触发。
只要您看到您正在寻找的匹配条件，您可能触发一个自定义事件。

关于$.fn.myEvent 的定义，您可能想看看how the shortcuts for native events are created（其中name 将是"myEvent"）。

Answer 2

你把两个不同的点混为一谈：

1. 事件在一般情况下如何运作，以及
2. 浏览器环境如何调度与用户操作相关的事件。

第一点，我引用another answer of mine：

在 JavaScript 中，自定义事件只是一条消息，向所有事件侦听器广播，上面写着“大家注意：事件 X 刚刚发生！”任何关心该事件的监听器都可以运行一些函数。

这就是事件在 JavaScript 中的工作方式。您设置了侦听器，稍后会触发事件。触发器作为给侦听器的消息，告诉他们运行。

我刚刚说过某事 触发了一个事件：我们称该事件为该事件的发起者。对于自定义事件，发起者始终是您编写的其他 JavaScript 代码（或来自库等）。然而，对于原生事件，发起者是浏览器本身。 JavaScript 无法控制浏览器选择调度事件的方式。

您能做的最好的事情就是侦听本机浏览器事件，然后让这些侦听器自己调度自定义事件。

Answer 3

对于那些想知道的人（就像我在过去 2 年所做的那样），您可以创建一个自定义事件（使用纯 javascript），如下所述：

var myEvent = new Event('myEvent');

然后你可以像这样使用它：

document.querySelector('button').addEventListener(myEvent, function () {});

简单使用示例 DEMO

假设我们有一个名为 bgColor 的变量，我们想在 bgColor 值发生变化时更改 5 个按钮的背景颜色、段落的颜色和输入的边框颜色，并且我们不想使用间隔来检查值的变化，我们也不想在变量发生变化时一遍又一遍地重复相同的代码。

首先我们需要定义我们的变量：

var bgColor='red',
    eventName = 'bgColorChanged';

那么我们需要监听事件：

function Listen(elems,eventName,callback){

    var event=new Event(eventName); //create the custom event

    for(var i=0, elemsLength=elems.length; i < elemsLength; i++){ //iterate over the selected elements

        elems[i].addEventListener(event,callback); //add event listener for our custom event

        elems[i][eventName]=event; //store the event

        //store the element
        if(window.affectedElems){
            window.affectedElems.push(elems[i])
        }
        else{
            window.affectedElems=[];
            window.affectedElems.push(elems[i])
        }
        //----------------------------

    }
}

现在我们可以像这样监听我们的自定义事件了：

Listen(document.querySelectorAll('button'),eventName,function(){
    this.style.backgroundColor=bgColor;
});

然后我们需要一个函数来调度/触发我们的事件：

function dispatchEvent(eventName) {

    var event=document.createEvent("HTMLEvents"), //defining the type of the event

    elems=window.affectedElems; //getting the stored elements

    //iterating over each element and dispatching the stored event
    for(var i=0, elemsLength=elems.length; i < elemsLength; i++){
        event.initEvent(elems[i][eventName], true, true);
        event.eventName = eventName;
        elems[i].dispatchEvent(event);
    }
    //-----------------------------------
}

现在我们可以像这样触发我们的事件：

dispatchEvent(eventName);

现在一切准备就绪，我们只需要更改 bgColor 的值并触发事件并让我们的系统完成工作。

bgColor='blue';
dispatchEvent(eventName);