Enter the prototype of an Object.prototype.function(), where all the EventListeners are safed (Javascript)

let myLibrary = [];
let submitBtn = document.querySelector("#submitBtn");
let textInput = document.querySelectorAll("input");
let addNew = document.getElementById("addNew");
let fieldSet = document.getElementById("fieldset");
let cancelBtn = document.querySelector("#cancelBtn");
let bookDisplay = document.getElementById("bookDisplay");
let flexItems = document.getElementsByClassName("flexItems"); 


// object Constructor for new books
class Book {
    constructor(title, author, pages, read) {
        this.title = title;
        this.author = author;
        this.pages = pages;
        this.read = read;
    }
}



Book.prototype.addToDisplay = function() {
    let newDiv = document.createElement("div");
    bookDisplay.appendChild(newDiv).className = "flexItems";
    
    let newSpan = document.createElement("span");

    flexItems[myLibrary.length-1].appendChild(newSpan).className = "spanItem";
    newSpan.innerText = this.title;

    this.read === true ? flexItems[myLibrary.length-1].style.backgroundColor = "green" : 
                         flexItems[myLibrary.length-1].style.backgroundColor = "red";

    newDiv.addEventListener("mouseenter", moreInfo => {
        newSpan.childNodes[0].nodeValue = this.author + "\n" + this.title + "\n" + this.pages + " pages";
    })

    newDiv.addEventListener("mouseleave", defaultInfo => {
        newSpan.childNodes[0].nodeValue = this.title;
    })


}



// creates a new instance of Book and pushes the object into the array
let addToLibrary = function addToLibrary() {
    newBook = new Book(textInput[0].value, textInput[1].value, textInput[2].value, textInput[3].checked)
    myLibrary.push(newBook);

    newBook.addToDisplay();
};


// eventlistener, to submit a new Book to the library
submitBtn.addEventListener("click", addToLibrary);


// sets the form's display from block to non-visible
let cancel = function cancel() {
    fieldSet.style.display = "none";
}

// cancels the form and returns back
cancelBtn.addEventListener("click", cancel);


// sets the form's display from non-visible to visible
let openForm = function openForm() {
    fieldSet.style.display = "block";
}

// opens form to add new book
addNew.addEventListener("click", openForm);

body {
    margin-left: 20px;
}

h1 {
    text-align: center;
}

#fieldset {
    position: fixed;
    z-index: 2;
    border: none;
    display: none;
    background: #3CBC8D;
    border-radius: 10px;
    right: 1%;
    top: 2%;
    width: 400px;
    height: auto;
    overflow: auto;
}

button {
    cursor: pointer;
}


.display {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}

.flexItems {
    position: relative;
    display: flex;
    margin: 5px;
    color: black;
    font: Georgia;
    font-size: 20px;
    height: 200px;
    width: 200px;
    align-items: center;
    border: 2px solid gray;
    transition: 500ms;
    border-radius: 5px;
}

.spanItem {
    width: 100%;
    text-align: center;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.display .flexItems:focus,
.display .flexItems:hover {
    transform: scale(1.2);
    z-index: 1;
}


#addNew {
    position: fixed;
    z-index: 2;
    border: none;
    background: #3CBC8D;
    color: white;
    border-radius: 10px;
    right: 2%;
    top: 2%;
    width: 100px;
    height: 50px;
    overflow: auto;
    cursor: pointer;

}

















/*. Could be additionally used for the hover-effect, but doesnt look that nice for more than one row

flexItems:hover ~.flexItems {
    transform: translateX(25%);
}

.display:focus-within .flexItems,
.display:hover .flexItems {
    transform: translateX(-25%);
}

.flexItems:focus ~.flexItems,
.flexItems:hover ~.flexItems {
    transform: translateX(25%);
} */

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js" defer></script>
    <title>Library</title>
</head>
<body>
    <div><h1>My book library</h1></div>
    <div id="bookDisplay" class="display">
    </div>
    <div>
        <button id="addNew">Test</button>
    </div>
        <fieldset id="fieldset">
            <form id="form">
                <div>
                    <label for="title">Title: </label>
                    <input type="text" name="title" id="title" class="usrInput">
                </div>
                <div>
                    <label for="author">Author: </label>
                    <input type="text" name="author" id="author" class="usrInput">
                </div>
                <div>
                    <label for="number">Number of pages: </label>
                    <input type="number" name="number" id="number" class="usrInput">
                </div>
                <div>
                    <label for="read">Already read?: </label><br>
                    Y <input type="radio" name="read" id="read" value="Y" class="read">
                    N <input type="radio" name="read" id="read" value="N" class="read">
                </div>
                <button id="submitBtn" type="button">Submit</button>
                <button id="cancelBtn" type="button">Cancel</button>
        </fieldset>
    </div>
</body>
</html>