如何移除通过ws.onmessage/ws.onopen设置的原生WebSocket事件处理器？

Great question! When you set WebSocket event handlers using direct property assignments like ws.onmessage = myFunc; or ws.onopen = function() {};, removing them is simpler than you might think—no need for complex methods since this approach doesn’t use the standard event listener subscription model.

Here’s the straightforward way to remove these handlers: #

• To remove an onopen handler: Assign null to the property:

  ws.onopen = null;
  

• To remove an onmessage handler: Do the same for the onmessage property:

  ws.onmessage = null;
  

Why this works: #

Unlike event handlers added with addEventListener(), which maintain a list of subscribed functions, the on* properties of a WebSocket only hold a single function reference at a time. When you assign a new function to them, the old reference gets overwritten. Setting the property to null clears the current reference entirely, ensuring no function runs when the event fires.

Example workflow: #

// Initialize WebSocket connection
const ws = new WebSocket('wss://example.com/ws');

// Set initial handlers
ws.onopen = () => {
  console.log('Connection established!');
};

const handleIncomingMessage = (event) => {
  console.log('Received:', event.data);
};
ws.onmessage = handleIncomingMessage;

// Later, remove the handlers (e.g., on user action or timeout)
document.getElementById('close-handlers').addEventListener('click', () => {
  ws.onopen = null;
  ws.onmessage = null;
  console.log('WebSocket event handlers removed.');
});

A quick note on comparison with addEventListener: #

If you were using ws.addEventListener('message', handleIncomingMessage), you’d need to call ws.removeEventListener('message', handleIncomingMessage) to remove it—but since you’re using direct assignment, the null trick is all you need.

内容的提问来源于stack exchange，提问作者Halcyon