jQuery: Display the event type on clicking elements

Last update on May 30 2022 10:20:00 (UTC/GMT +8 hours)

jQuery Events : Exercise-15 with Solution

Display the event type on clicking all h1 elements.

Sample Data :

<body>
  <h1>This is header1</h1>
  <h1>This is another header1</h1>
  <h2>This is header2</h2>
  <h2>This is header3</h2>
</body>

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Display the  event type on clicking all h1 elements</title>
</head>
<body>
  <h1>This is header1</h1>
  <h1>This is another header1</h1>
  <h2>This is header2</h2>
  <h2>This is header3</h2>
</body>
</html>

JavaScript Code:

$( "h1" ).click(function(event) {
 console.log(event.type); // "click"
});

Live Demo:

See the Pen jquery-events-exercise-15 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Count the number of milliseconds between the two click events on a paragraph.
Next: Display the keyboard key which was pressed in a textbox.