Создать класс для обработки клика и других событий элемента

Question

Я хочу создать класс и передать ему свой элемент и запускать классы событий вместо того, чтобы каждый раз вызывать события javascript.

Моя попытка

HTML:

<div id="upload-container">
<label for="myfile">Select a file:</label>
<input type="file" id="fileInput" name="myfile">
<button id="send"> Upload </button> </div>

Javascript класс:

function Myevents(ele) {
    this.element = ele;
}

Myevents.prototype = {

    init: function() {
        this.element.addEventListener('click', function(file) {
            console.log(file)
        }(this.element));

        this.element.addEventListener('mouseover', function(file) {
            console.log(file)
        }(this.element));
    }
}

var ele = document.getElementById('send');
var instance = new Myevents(ele);
instance.init();

instance.click() ;  // should be able to call it manually
instance.mouseover();   // should be able to call it manually

здесь оба вышеуказанных вызова не запускаются должным образом, как справиться с этим, любая помощь будет признательна.

Answer 1

Здесь я воссоздаю вашу функцию Myevents. Я создаю click function в качестве прототипа, присоединяю слушателя события щелчка и вызываю его неявно.

const Myevents = function(el) {
	this.element = el;
}

Myevents.prototype = {
	click: function() {
    	// Attach the event listener
    	this.element.addEventListener('click', (e) => {
        	e.preventDefault();
            console.log('clicked');
        });
        
        // Finally fire the click
        // this.element.click();
    }
}

const el = document.querySelector('#clickbtn');
const instance = new Myevents(el);
instance.click();

<div>
  <p>Hello World</p>
  <button id="clickbtn">Ok</button>
</div>

Примечание: я не знаю, но дайте мне знать, если оно отвечает вашим требованиям.