Обработка событий Onclick для изображений с использованием JavaScript — примеры кода - Fcodenotes

Вот пример создания веб-страницы с тремя изображениями и использования кода JavaScript для обработки события onclick. Я расскажу три разных способа добиться этого.

Метод 1: встроенные обработчики событий
В этом методе событие onclick обрабатывается непосредственно в теге HTML с помощью встроенных обработчиков событий.

<!DOCTYPE html>
<html>
<head>
  <title>Image Click Example</title>
</head>
<body>
  <img src="image1.jpg" onclick="handleClick(1)">
  <img src="image2.jpg" onclick="handleClick(2)">
  <img src="image3.jpg" onclick="handleClick(3)">
  <script>
    function handleClick(imageNumber) {
      console.log('Image clicked:', imageNumber);
      // Add your code here to handle the click event
    }
  </script>
</body>
</html>

Метод 2: прослушиватели событий
В этом методе прослушиватели событий прикрепляются к каждому изображению с помощью кода JavaScript.

<!DOCTYPE html>
<html>
<head>
  <title>Image Click Example</title>
</head>
<body>
  <img src="image1.jpg" id="image1">
  <img src="image2.jpg" id="image2">
  <img src="image3.jpg" id="image3">
  <script>
    var image1 = document.getElementById('image1');
    image1.addEventListener('click', function() {
      handleClick(1);
    });
    var image2 = document.getElementById('image2');
    image2.addEventListener('click', function() {
      handleClick(2);
    });
    var image3 = document.getElementById('image3');
    image3.addEventListener('click', function() {
      handleClick(3);
    });
    function handleClick(imageNumber) {
      console.log('Image clicked:', imageNumber);
      // Add your code here to handle the click event
    }
  </script>
</body>
</html>

Метод 3: Делегирование событий
В этом методе к родительскому элементу прикрепляется один прослушиватель событий, а событие делегируется соответствующему изображению на основе целевого элемента.

<!DOCTYPE html>
<html>
<head>
  <title>Image Click Example</title>
</head>
<body>
  <div id="imageContainer">
    <img src="image1.jpg" data-image-number="1">
    <img src="image2.jpg" data-image-number="2">
    <img src="image3.jpg" data-image-number="3">
  </div>
  <script>
    var imageContainer = document.getElementById('imageContainer');
    imageContainer.addEventListener('click', function(event) {
      var target = event.target;
      if (target.tagName === 'IMG') {
        var imageNumber = target.getAttribute('data-image-number');
        handleClick(parseInt(imageNumber));
      }
    });
    function handleClick(imageNumber) {
      console.log('Image clicked:', imageNumber);
      // Add your code here to handle the click event
    }
  </script>
</body>
</html>