Javascript 定义自定义事件

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

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

例如

然后在活动中，您将呼叫：

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

嗯，在这里之前没问题。为了更进一步，我必须再举一个例子：

问题：

假设我们已经定义了：

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

因此，我们可以将其用作：

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

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

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

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

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

具有

$（document.myEvent（）的功能

这样我们就可以向它传递回调函数，而不需要实际触发事件

更多解释：

例如，当我们调用

$（document）.on（'click'）

我们实际上不需要在其他地方触发click事件，如

$（document）。trigger（'click'）

以使其工作，因此每当发生

click

时，函数就会启动。我想为“myEvent”设置一个事件侦听器，以便在匹配条件时启动函数

换句话说（如下面的评论中所述），我想知道是否有办法让jQuery将“myEvent”视为默认事件之一（单击、鼠标移动、提交等）

任何答案或想法都将受到高度赞赏

我想为“myEvent”设置一个事件侦听器，这样当条件匹配时，函数就会启动

发动机如何知道您所指的“条件”？不，“自定义事件”之所以称为自定义事件，是因为它们不是通过一些较低级别的操作进行本地触发的，而是通过自定义代码触发的。
只要看到匹配的条件，就可以触发自定义事件

---

关于

$.fn.myEvent

的定义，您可能想看一看（其中

name

将是

“myEvent”

）。

您将两个不同的点放在一起：

事件如何在常规上工作，以及

浏览器环境如何分派与用户操作相关的事件

关于第一点，我将引用：

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

这就是JavaScript中事件的工作方式。您设置了侦听器，然后有东西触发事件。触发器充当给侦听器的消息，告诉它们运行

我刚才说过有什么东西触发了一个事件：我们称之为事件的发起者。对于自定义事件，启动器始终是您编写的其他JavaScript代码（或来自库等）。但是，对于本机事件，启动器是浏览器本身。JavaScript无法控制浏览器选择如何发送事件

---

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

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

var myEvent = new Event('myEvent');

然后你可以这样使用它：

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

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

dispatchEvent(eventName);

简单用法示例

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

假设我们有一个名为

bgColor

的变量，我们想更改5个按钮的背景色，无论何时

bgColor

值发生变化，段落的颜色和输入的边框颜色都会发生变化，我们不希望使用间隔来检查值的变化，也不希望在变量发生变化时反复重复相同的代码

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

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])
        }
        //----------------------------

    }
}

然后我们需要一个函数来分派/激发我们的事件：

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);
    }
    //-----------------------------------
}

现在一切都准备好了，我们只需要更改

bgColor

的值，然后触发事件，让我们的系统完成工作

bgColor='blue';
dispatchEvent(eventName);

---

你想完成什么？myEvent启动需要满足哪些条件？您的

myEvent

是一个自定义事件，除非您通过触发它来实现，否则它永远不会在野外发生，那么您到底期望什么呢？@Jeff该条件（例如）是

contextmenu

（或者如果用户右键单击页面）但那不是

myEvent

，而是

contextmenu

事件，这真的没有意义吗？回答你的问题，没有办法让自定义事件像本机事件一样，最接近的是用

$（document）之类的东西触发它。on（'contextmenu'，function（）{$（document）。trigger（'myEvent'）你分享的非常有趣的源代码+1为了完整起见，：-）