javascript - Difference between "click" and onclick

Question

Welcome To Ask or Share your Answers For Others

javascript - Difference between "click" and onclick

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Difference between "click" and onclick

What is the difference between click in

document.getElementById("myBtn").addEventListener("click", displayDate);

and onclick in

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>

Are they both considered as events? Why can't we use click instead of onclick and visce versa?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T03:06:53+0000

The difference is that the first is an event listener, and the second is an event handler content attribute.

Event handler content attributes store an internal raw uncompiled handler, which produces an event listener via the event handler processing and getting the current value of the event handler algorithms.

In practice, this affects the scope, e.g.

(function() { var element = document.body;
  var str = "console.log([typeof foo, typeof bar])";
  var func = function() { console.log([typeof foo, typeof bar]); };
  element.foo = 'foo';
  var bar = 'bar';
  element.setAttribute('onclick', str);
  element.addEventListener('click', func);
  element.click();
  // Event handler content attribute logs ["string", "undefined"]
  // Event listener logs ["undefined", "string"]
})();

I discourage using event handlers. They are an old reminiscence and are superseded by event listeners.

Categories

javascript - Difference between "click" and onclick

javascript - Difference between "click" and onclick

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags