Question

我想学习如何定义自定义事件，但不完全像在网上说的那样！让我来说明一下：

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

e.g。

$(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”设置一个事件监听器，以便在条件匹配时触发该函数。

换句话说（如评论中所述），我想知道是否有办法让jQuery将“myEvent”视为默认事件之一（click，mousemove，提交，等等。）

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

Answer 1

我想为＆＃34; myEvent＆＃34;提供一个事件监听器。这样当条件匹配时，函数就会触发。

引擎如何知道＆＃34;条件＆＃34;你的意思是？不，＆＃34;自定义活动＆＃34;被称为自定义，因为它们不是本地触发（通过一些较低级别的操作），而是通过自定义代码。
只要您看到与您正在寻找的匹配条件，可能会触发自定义事件。

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

Answer 2

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

事件如何处理一般，
浏览器环境如何调度与用户操作相关的事件。

首先，我引用another answer of mine：

在JavaScript中，自定义事件只是一条消息，向所有事件监听器广播，说：“注意每个人：事件X刚刚发生！”任何关心该事件的监听器都可以运行某些功能。

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

我刚刚说某事触发了一个事件：我们将该事件称为事件的发起人。对于自定义事件，启动程序始终是您编写的其他JavaScript代码（或来自库等的代码）。但是，对于本机事件，启动器是浏览器本身。 JavaScript无法控制浏览器选择分派事件的方式。

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

Answer 3

对于想知道的人（就像我在过去两年中所做的那样），你可以创建一个自定义事件（使用纯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;
});

然后我们需要一个函数来Dispatch / Fire我们的事件：

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

定义自定义事件

3 个答案: