定义自定义事件

Define custom event

本文关键字：事件 自定义 定义      更新时间：2023-09-26

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

在jQuery网站介绍自定义事件部分中，它教你如何在代码中创建自定义事件:

。 

$(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"视为默认事件(点击，鼠标移动，提交等)之一。

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

引擎怎么知道你所说的"条件"?不，"自定义事件"被称为custom，因为它们不是原生触发的(通过一些较低级别的操作)，而是由自定义代码触发的。当看到匹配的条件时，可以触发自定义事件。

关于$.fn.myEvent的定义，您可能想看看如何创建本机事件的快捷方式(其中name将是"myEvent")。

你把两个不同的点放在一起了:

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

对于第一点，我将引用我的另一个答案:

在JavaScript中，自定义事件只是一条消息，广播给所有事件监听器，它说，"大家注意:事件X刚刚发生了!"任何关心该事件的监听器都可以运行某个函数。

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

我刚才说了某物触发了一个事件:我们把它称为事件的发起者。对于自定义事件，发起者总是您编写的其他JavaScript代码(或来自库等)。然而，对于本机事件，发起者是浏览器本身。JavaScript无法控制浏览器如何选择分派事件。

最好是侦听本地浏览器事件，然后让这些侦听器自己调度自定义事件。

对于那些想知道的人(就像我在过去两年中所做的那样)，你可以创建一个自定义事件(使用纯javascript)，如下所述:

var myEvent = new Event('myEvent');

，然后你可以这样使用:

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

简单的用法示例演示

假设我们有一个名为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);
相关文章：