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

Tips on updating the arrow icon after clicking on a dropdown menu

How to retrieve the present value from an array using AngularJS

Issues with javascript and php carousel functionality not performing correctly

Tips for ensuring only one property is present in a Typescript interface

Creating evenly spaced PHP-generated divs without utilizing flexbox

The server's request is being processed through jQuery's ajax functionality

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Krajee Bootstrap File Input, receiving AJAX success notification

The onChange event for React select is being triggered twice, incorrectly using the old value the second time

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Exploring Object Arrays with Underscore.js

Roundabout Navigation Styles with CSS and jQuery

Ways to decrease the size of this item while maintaining its child components?

Ensure the links open in a new tab when using Firefox

Calculate the total value of a specific field within an array of objects

Ensure that Javascript waits for the image to be fully loaded before triggering the Ajax function

Retrieve the data from a Sequelize Promise without triggering its execution

Issue with JSON data not functioning properly in AJAX request

Issue with Pagination functionality when using Material-UI component is causing unexpected behavior

Modifying JavaScript Code in Inspect Element Editor