The correct way to properly define an eventEmitter in JavaScript

Question

The correct way to properly define an eventEmitter in JavaScript

I am looking to create a helper object with a function that will trigger on each "orientationchange" event of the window.

Below is my code, but it is not working correctly. Can you help me define the onRotate function properly so that I can use it globally?

    <script type="text/javascript">
    'use strict';
    var GlobalHelper = (function () {

        var me = {
            onRotate: onRotate // struggling with this part
        }

        function onRotate() {
            window.addEventListener("orientationchange", function (event) {
                console.log(event.target.screen.orientation.angle);
            });
        }

        return me;

    })();

    GlobalHelper.onRotate = function (e) {
        console.log(e);
    }

</script>

javascript eventemitter

Answer 1

Answer №1

I figured out the solution to my question on my own, and surprisingly, it was quite simple.

   <script type="text/javascript">
    'use strict';
    var GlobalHelper = (function () {

        var me = {
            onRotate: function (e) {  }
        }

        function _init() {
            window.addEventListener("orientationchange", function (event) {
                me.onRotate(event);
            });
        }

        _init();

        return me;

    })();

    GlobalHelper.onRotate = function (e) {
       console.log(e);
    }

</script>

Answer 2

I figured out the solution to my question on my own, and surprisingly, it was quite simple.

   <script type="text/javascript">
    'use strict';
    var GlobalHelper = (function () {

        var me = {
            onRotate: function (e) {  }
        }

        function _init() {
            window.addEventListener("orientationchange", function (event) {
                me.onRotate(event);
            });
        }

        _init();

        return me;

    })();

    GlobalHelper.onRotate = function (e) {
       console.log(e);
    }

</script>

Answer 3

Answer №2

If you want to enhance your code with a custom programmable method for creating listeners and bonded functions, here's an option for you to explore. You can experiment with it by running the code snippet and interacting with the results window by pressing keyboard keys.

// Define the bindFn function
const bindFn = e => {
  // Object to store functions
  let fns = {};
  
  // Event listener to execute all functions in fns object
  window.addEventListener(e, event => {
    for(const f in fns) fns[f](event);
  });
  
  // Return method for adding new functions
  return {
    add: (name, fn) => {
      if(!fns[name]) fns[name] = fn;
      else console.log(`Function named ${name} already exists, skipping...`);
    }
  };
};

// Create binder for orientation change event
const OrCh = bindFn("orientationchange");

// Add a function to run on this event
OrCh.add('log', event => console.log(event.target.screen.orientation.angle));

// Test with another easy-to-trigger event
const KeyP = bindFn("keypress");

// Add logger
KeyP.add('log', event => console.log(`key pressed: ${event.code}`));

// Add an alternative function
KeyP.add('logAlt', event => console.log(`Alternative function triggered: ${event.code}`));

Answer 4

If you want to enhance your code with a custom programmable method for creating listeners and bonded functions, here's an option for you to explore. You can experiment with it by running the code snippet and interacting with the results window by pressing keyboard keys.

// Define the bindFn function
const bindFn = e => {
  // Object to store functions
  let fns = {};
  
  // Event listener to execute all functions in fns object
  window.addEventListener(e, event => {
    for(const f in fns) fns[f](event);
  });
  
  // Return method for adding new functions
  return {
    add: (name, fn) => {
      if(!fns[name]) fns[name] = fn;
      else console.log(`Function named ${name} already exists, skipping...`);
    }
  };
};

// Create binder for orientation change event
const OrCh = bindFn("orientationchange");

// Add a function to run on this event
OrCh.add('log', event => console.log(event.target.screen.orientation.angle));

// Test with another easy-to-trigger event
const KeyP = bindFn("keypress");

// Add logger
KeyP.add('log', event => console.log(`key pressed: ${event.code}`));

// Add an alternative function
KeyP.add('logAlt', event => console.log(`Alternative function triggered: ${event.code}`));

The correct way to properly define an eventEmitter in JavaScript

Answer №1

Answer №2

Similar questions

How can I utilize a CDN for JavaScript libraries in Gulp?

Customizing Angular 2's Webpack environment setup dynamically

I am a beginner in JavaScript and I'm struggling to understand why it is not executing the else statement

Different Ways to Access an Array in an EJS Template

Sort an array by mapping it in decreasing order based on the total sum of its elements

How to send a function from a parent component to a child component in Vue.js

anychart: The right side of Gantt Charts is being cut off or trimmed

Retrieving time zone using offset with javascript

The functionality of Bootstrap tabs is compromised when used within a modal dialog

Combining Extjs combo with autocomplete functionality for a search box, enhancing synchronization capabilities

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Incorrect footer navigation on my Vuepress website

"Step-by-Step Guide: Activating Tab Functionality in J

Setting a value in the selectpicker of rsuitejs involves assigning a specific value to the

Custom attribute in ReactJS component - I am not defined in my custom attribute in React component

When attempting to set a dynamic src tag for embedding a Google Map in a React application, an X-Frame-Options

Ways to update the select field without having to reload the entire page

Mapping a bar chart on a global scale

Choose all the alternative A radio buttons utilizing JavaScript

Use PHP to highlight the row that has been selected in an HTML table