如何在JavaScript中传递DOM元素作为参数？传递myVideo遇问题求助

Yes, absolutely—passing DOM elements as function parameters is not only allowed but a very common practice in JavaScript. It makes your code more reusable, modular, and easier to maintain, since you can write functions that work with any element instead of hardcoding specific ones.

The problem you're seeing (autoplay triggering unexpectedly, event listeners failing) has nothing to do with passing the DOM element itself—it's almost certainly a mistake in how you're attaching the function to the event listener or structuring the function. Let's break down the most common causes and fixes:

Mistake 1: Invoking the function immediately instead of passing it as a callback #

If your code looks like this:

playButton.addEventListener('click', play(myVideo));

You're not passing the play function to the event listener—you're running play(myVideo) right away (which causes the autoplay) and passing its return value (probably undefined) to the listener. That's why the click event does nothing later!

Fix: Wrap the function call in an arrow function to pass it as a proper callback:

playButton.addEventListener('click', () => play(myVideo));

Or adjust your play function to return a reusable callback that uses the element:

function play(videoElement) {
  return function() {
    videoElement.paused ? videoElement.play() : videoElement.pause();
  };
}

// Now you can pass it directly:
playButton.addEventListener('click', play(myVideo));

Mistake 2: Missing guard clauses or incorrect parameter usage #

Make sure your play function properly accepts and validates the element parameter. A robust version would look like this:

function play(videoElement) {
  // Guard clause: exit if the element doesn't exist
  if (!videoElement) return;
  
  if (videoElement.paused) {
    videoElement.play();
    playButton.textContent = '⏸️';
  } else {
    videoElement.pause();
    playButton.textContent = '▶️';
  }
}

This ensures you don't run into errors if the selector fails to find the element, and it clearly uses the passed parameter instead of relying on global variables.

Why this pattern is so common #

Passing DOM elements to functions is a core part of writing flexible web code. You'll see it used everywhere:

• Reusable utility functions (e.g., a single function to toggle visibility for any element)
• Component-based architectures (passing child elements to parent components)
• Event delegation handlers (passing the target element to a processing function)

It helps keep your code decoupled, avoids global scope clutter, and makes it easier to test and debug.

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