javascript - 如何使用 Vanilla JS 以动态方式注册/注销事件

问题描述

我已经和我的老师谈过了，他告诉我你为什么将<script>元素作为最后一部分<body>，直接在 HTML 元素上使用onload=事件，或者以另一种方式包含脚本<body>（或推迟其执行），是因为你想保证脚本只会在 DOM 加载后才被激活，并且可以访问所需的元素。但是...这不是惯例，因为在涉及多个 HTML 文档的解决方案中很难扩展，在这种情况下共享相同的文件资源，例如 JavaScript。相反，您将通过使用 JS 正确注册事件来处理此执行流程。

我被告知将窗口事件load放在我的 JS 文件的末尾。

这些是我遇到的错误booking.html： Uncaught TypeError: Cannot read property 'target' of undefined at addEvent (main.js:65) at start (main.js:10) addEvent.

为什么我会收到此错误？

这是我的代码：

function start() {

  let path = window.location.pathname;

  if (path.endsWith("contact.html")) {
    browserDetection;
  } else if (path.endsWith("employees.html") || path.endsWith("ourfleet.html")) {
    registerGalleryEvents();
  } else if (path.endsWith("booking.html")) {
    addEvent();
    getSeat();
  }

  /* browser detector  */

  var browserDetection = (function (agent) {
    switch (true) {
      case agent.indexOf("edge") > -1:
        return "MS Edge (EdgeHtml)";
      case agent.indexOf("edg") > -1:
        return "Microsoft Edge";
      case agent.indexOf("opr") > -1 && !!window.opr:
        return "Opera";
      case agent.indexOf("chrome") > -1 && !!window.chrome:
        return "Chrome";
      case agent.indexOf("trident") > -1:
        return "Internet Explorer";
      case agent.indexOf("firefox") > -1:
        return "Mozilla Firefox";
      case agent.indexOf("safari") > -1:
        return "Safari";
      default:
        return "other";
    }
  })(window.navigator.userAgent.toLowerCase());
  document.getElementById("specific-h3").innerHTML = "Here you can contact us if you have any questions. <br>\ <br>\ And by the way, you are using " + browserDetection + " browser.";


  function registerGalleryEvents() {
    const galleryImgs = document.querySelectorAll(".galleryImg");
    galleryImgs.forEach((galleryImg) => {
      galleryImg.addEventListener("click", () => {
        displayImage(galleryImg);
      });
    });
  }

  //declaring the displayImage function. reference: https://stackoverflow.com/a/65974064/14502646

  function displayImage(thumbnail) {
    const currentImgSrc = thumbnail.getAttribute("src");
    const [imgName, ext] = currentImgSrc.split(".");

    document.getElementById('myPicture').src = imgName + '-big.' + ext;
  }

  var seats = document.getElementsByClassName('grid-item')
  // Saving Javascript objects in sessionsStorage. 
  var data = JSON.parse(sessionStorage.getItem('bookingData'))


  function addEvent(event) {

    //Makes sure that the first 6 seats are Business class and the rest are Economy.
    if (parseInt(event.target.innerHTML) >= 1 && parseInt(event.target.innerHTML) <= 6) {
      document.getElementById('classType').innerHTML = 'Class Type: Business'
    } else {
      document.getElementById('classType').innerHTML = 'Class Type: Economy'
    }

    //event.target.innerHTML is the number of seat that is selected. 
    document.getElementById('seat').innerHTML = 'Seat Selected: ' + event.target.innerHTML
    document.getElementById('seatNumber').value = event.target.innerHTML
    var selectedSeats = document.getElementsByClassName("selected");
    if (selectedSeats.length > 0) {
      for (var j = 0; j < selectedSeats.length; j++) {
        selectedSeats.item(j).className = selectedSeats.item(j).className.replace('grid-item selected', 'grid-item');
      }
    }
    event.target.className = event.target.className + " selected";
  }

  for (var i = 0; i < seats.length; i++) {
    seats[i].addEventListener('click', addEvent)
  }

  var seatList = document.getElementsByClassName("grid-item")
  for (var i = 0; i < data.length; i++) {
    seatList.item(parseInt(data[i].seatNo) - 1).removeEventListener("click", addEvent)
    seatList.item(parseInt(data[i].seatNo) - 1).className = seatList.item(parseInt(data[i].seatNo) - 1).className.replace('grid-item', 'grid-item booked')
  }

  document.getElementsByClassName('reset').addEventListener('click', function () {
    location.reload()
  })

  function getSeat() {
    var inp = document.getElementsByClassName("grid-item selected");
    if (inp.length > 0) {
      var inputData = {
        firstName: document.getElementById('fname').value,
        lastName: document.getElementById('lname').value,
        identityNo: document.getElementById('identity').value,
        classType: document.getElementById('classType').innerHTML,
        seatNo: parseInt(document.getElementById('seatNumber').value)
      }

      if (JSON.parse(sessionStorage.getItem('bookingData')) != null) {
        var bookingData = JSON.parse(sessionStorage.getItem('bookingData'))
        bookingData.push(inputData)
        sessionStorage.setItem('bookingData', JSON.stringify(bookingData))
      } else {
        console.log('block')
        var bookingData = []
        bookingData.push(inputData)
        sessionStorage.setItem('bookingData', JSON.stringify(bookingData))
      }
      alert('Flight booked successfully.')
      window.print()
    } else {
      alert("Select a seat before proceeding!")
    }
  }
}

window.addEventListener("load", start);

标签： javascript

javascript - 如何使用 Vanilla JS 以动态方式注册/注销事件

问题描述

解决方案

推荐阅读