How to Send an Event to Another JavaScript: 5 Powerful Techniques Revealed

Attention web developers! Are you struggling with communication between different parts of your JavaScript code? Frustrated by the complexities of managing interactions across multiple scripts? Seeking a foolproof way to send events from one JavaScript file to another? Look no further! Mastering cross-script communication is crucial for building robust, modular web applications. In this guide, we’ll explore five powerful techniques to send events between JavaScript files, empowering you to create more flexible and maintainable code.

How to Send an Event to Another JavaScript?

Before we dive into specific methods, let’s understand why sending events between JavaScript files is important. As web applications grow in complexity, it’s common to split code into multiple files for better organization and maintainability. However, these separate scripts often need to communicate with each other. Sending events provides a clean, decoupled way for different parts of your application to interact. The general approach involves creating, dispatching, and listening for events. Here’s a basic syntax for creating and dispatching a custom event:

const event = new CustomEvent('myEvent', { detail: { message: 'Hello!' } });
document.dispatchEvent(event);

Now, let’s explore five methods to send events between JavaScript files.

Read more: How to write an Inline IF Statement in JavaScript?

Method 1: Using Custom Events

This method uses the CustomEvent API to create and dispatch custom events that can be listened to by other scripts.

Syntax:

// In file1.js
const event = new CustomEvent('myCustomEvent', { detail: { message: 'Hello from file1!' } });
document.dispatchEvent(event);

// In file2.js
document.addEventListener('myCustomEvent', (e) => {
  console.log(e.detail.message);
});

Example:

// sender.js
function sendMessage(message) {
  const event = new CustomEvent('messageEvent', { detail: { text: message } });
  document.dispatchEvent(event);
}

// receiver.js
document.addEventListener('messageEvent', (e) => {
  console.log('Received:', e.detail.text);
});

// Usage
sendMessage('Hello from sender!');

Pros:

• Native browser support
• Can carry complex data in the event detail
• Decoupled communication

Cons:

• Limited to same-origin scripts
• Requires both scripts to be loaded in the same document

Method 2: Using a Shared Event Emitter

This method uses a shared event emitter object that multiple scripts can access to emit and listen for events.

Syntax:

// In a shared file (eventEmitter.js)
class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName, data) {
    const event = this.events[eventName];
    if (event) {
      event.forEach(callback => callback(data));
    }
  }
}

export const sharedEmitter = new EventEmitter();

// In file1.js
import { sharedEmitter } from './eventEmitter.js';
sharedEmitter.emit('myEvent', { message: 'Hello from file1!' });

// In file2.js
import { sharedEmitter } from './eventEmitter.js';
sharedEmitter.on('myEvent', (data) => {
  console.log(data.message);
});

Example:

// eventEmitter.js
// ... (EventEmitter class as defined above)
export const sharedEmitter = new EventEmitter();

// sender.js
import { sharedEmitter } from './eventEmitter.js';

function sendMessage(message) {
  sharedEmitter.emit('messageEvent', { text: message });
}

// receiver.js
import { sharedEmitter } from './eventEmitter.js';

sharedEmitter.on('messageEvent', (data) => {
  console.log('Received:', data.text);
});

// Usage
sendMessage('Hello from sender!');

// In the sender window
window.postMessage('Hello from sender!', 'http://receiver-origin.com');

// In the receiver window
window.addEventListener('message', (event) => {
  if (event.origin === 'http://sender-origin.com') {
    console.log('Received:', event.data);
  }
});

// In parent window (sender)
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage({ type: 'greeting', text: 'Hello from parent!' }, '*');

// In iframe (receiver)
window.addEventListener('message', (event) => {
  if (event.data.type === 'greeting') {
    console.log('Received:', event.data.text);
  }
});

// In the sender script
localStorage.setItem('myEvent', JSON.stringify({ message: 'Hello!' }));

// In the receiver script
window.addEventListener('storage', (event) => {
  if (event.key === 'myEvent') {
    const data = JSON.parse(event.newValue);
    console.log('Received:', data.message);
  }
});

// sender.js
function sendMessage(message) {
  localStorage.setItem('communicationEvent', JSON.stringify({ text: message, timestamp: Date.now() }));
}

// receiver.js
window.addEventListener('storage', (event) => {
  if (event.key === 'communicationEvent') {
    const data = JSON.parse(event.newValue);
    console.log('Received:', data.text, 'at', new Date(data.timestamp));
  }
});

// Usage
sendMessage('Hello from another tab!');

// pubsub.js
const pubsub = {
  events: {},
  subscribe: function(eventName, fn) {
    this.events[eventName] = this.events[eventName] || [];
    this.events[eventName].push(fn);
  },
  publish: function(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(fn => fn(data));
    }
  }
};

export default pubsub;

// In publisher.js
import pubsub from './pubsub.js';
pubsub.publish('myTopic', { message: 'Hello subscribers!' });

// In subscriber.js
import pubsub from './pubsub.js';
pubsub.subscribe('myTopic', (data) => {
  console.log('Received:', data.message);
});

// pubsub.js
// ... (pubsub object as defined above)

// sender.js
import pubsub from './pubsub.js';

function sendMessage(message) {
  pubsub.publish('chat', { text: message, sender: 'User1' });
}

// receiver.js
import pubsub from './pubsub.js';

pubsub.subscribe('chat', (data) => {
  console.log(`${data.sender} says: ${data.text}`);
});

// Usage
sendMessage('Hello everyone!');