Steps for creating a basic prioritized event listener system in JavaScript

Question

Steps for creating a basic prioritized event listener system in JavaScript

I am currently working on an event/listener manager that has the following function:

  var addListener = function(event, listener) {
    myListeners[event].push(listener); //assume this code works
  }

However, I now need to modify it so that it appears as follows:

  var addListener = function(event, listener, fireFirst) {
    if(fireFirst) {
      myListenersToFireFirst[event].push(listener);
    } else {
      myListenersToFireSecond[event].push(listener);
    }
  }

This adjustment is being made in order for the fireEvent function to first execute the listeners stored in the myListenersToFireFirst array before moving on to the second array.

The revised function will demonstrate something along these lines:

  var fireEvent = function(event) {
    var firstListeners = myListenersToFireFirst[event];
    //for each listener in firstListeners, call `apply` on it

    var secondListeners = myListenersToFireSecond[event];
    //for each listener in secondListeners, call `apply` on it
  }

Would you say this approach is the most efficient way to achieve ordering priority when firing listener-events in JavaScript? Is there a more elegant solution for creating this list of listener-event execution priorities?

javascript

Answer 1

Answer №1

Perhaps this method presents a different approach than mine, focusing on inserting new handlers in the block. While it may seem specific, it actually serves as a more versatile tool with potential applications for your situation.

Here is a suggestion:

//creates a closure function that calls another function afterwards
Function.prototype.prefix=function(o) {
    var that=this;
    return function(){
        that.apply(this,arguments);
        return o.apply(this,arguments);
    };
}
//prefix is essentially a reversed suffix
Function.prototype.suffix=function(o) {return o.prefix(this);}

With this code snippet, you can concatenate functions to create a chain-like structure. This feature can be handy for adding additional listeners, monitoring function usage, or adapting code with minimal disruptions.

Here are some examples of usage:

function audit() {console.log(arguments.callee.caller,arguments.callee.name,arguments);}
function a() {alert(arguments);}
a=audit.prefix(a);


//a custom function
function f() {alert(arguments);}
f("test");//performing the defined alert
f=audit.prefix(a);
f("test");//now arguments will also appear in the console

//a built-in function
//this audit example only logs the arguments passed to it in the console
function audit() {console.log(arguments.callee,arguments);}
//auditing the alert function (not extremely useful, but demonstrates functionality)
alert=audit.prefix(alert);//alert is now prefixed with audit

//an event handler
document.body.onclick=function() {alert("clicked");};
document.body.onclick=audit.prefix(document.body.onclick);

Answer 2

Perhaps this method presents a different approach than mine, focusing on inserting new handlers in the block. While it may seem specific, it actually serves as a more versatile tool with potential applications for your situation.

Here is a suggestion:

//creates a closure function that calls another function afterwards
Function.prototype.prefix=function(o) {
    var that=this;
    return function(){
        that.apply(this,arguments);
        return o.apply(this,arguments);
    };
}
//prefix is essentially a reversed suffix
Function.prototype.suffix=function(o) {return o.prefix(this);}

With this code snippet, you can concatenate functions to create a chain-like structure. This feature can be handy for adding additional listeners, monitoring function usage, or adapting code with minimal disruptions.

Here are some examples of usage:

function audit() {console.log(arguments.callee.caller,arguments.callee.name,arguments);}
function a() {alert(arguments);}
a=audit.prefix(a);


//a custom function
function f() {alert(arguments);}
f("test");//performing the defined alert
f=audit.prefix(a);
f("test");//now arguments will also appear in the console

//a built-in function
//this audit example only logs the arguments passed to it in the console
function audit() {console.log(arguments.callee,arguments);}
//auditing the alert function (not extremely useful, but demonstrates functionality)
alert=audit.prefix(alert);//alert is now prefixed with audit

//an event handler
document.body.onclick=function() {alert("clicked");};
document.body.onclick=audit.prefix(document.body.onclick);

Steps for creating a basic prioritized event listener system in JavaScript

Answer №1

Similar questions

Best practices for timeout in HTTP long polling

Orchard's TinyMce now supports a drop event with jQuery integration

Prevent the Icon in Material UI from simultaneously changing

Images Are Failing to Load on the Webpage

The element's position remains unchanged after the .click re-event in the function

The type 'SVGPathSeg' cannot be assigned to type 'EnterElement' because the property 'ownerDocument' is not present in type 'SVGPathSeg'

Executing an Ajax request. Best method for transmitting various data elements:

When using jQuery to add an item to a List, it disappears immediately after

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

a guide on using ajax to distribute retrieved data among various td elements

Angular: Handling window resizing events in your application

Sharing data between React JS components Passing information between different components in React JS

JQuery isn't functioning properly on dynamically generated divs from JavaScript

Changing the caret position in a contenteditable div using HTML React

Capturing mouse coordinates from hover events in Highcharts Gantt using the highcharts-react library

When using `JSON.stringify`, the resulting data may vary from the original object

Tips for retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Exclusive Modal Pop-Up for First-Time Visitors - Utilizing Bootstrap, PHP, and JavaScript

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Experiencing difficulties when uploading information to an API in a React JS application