Create class to handle click and other events of element

Question

I want to create class and want to pass my element to it and fire events form class instead of triggering from javascript events everytime.

My try

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 class :

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

here both above two calls are not firing as required, how to handle this ,any help would appreciated.

Hi, what do you want to achieve exactly, if you want to trigger the click event see [Trigger click event](https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click) So you would instance.element.click() — Ermac, Mar 21 '20 at 20:17
@ankabot as we can add eventListeners on elements, same thing i want to achieve it from my class, just want to know why my click and mouse events doesn't fire — jsduniya, Mar 21 '20 at 20:22
@SajeebAhamed I'm adding click listner on init method to the element itself. — jsduniya, Mar 21 '20 at 20:23
I tested your code you have errors, you shouldn't put `;` after the init method definition, and also there is no `getElementBy` method, use `getElementById` — Ermac, Mar 21 '20 at 20:28

Sajeeb Ahamed · Accepted Answer · 2020-03-21T20:33:44.517

1

Here I recreate your Myevents function. I make a click function as a prototype and attach click event listener and call it implicitly.

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>

Note: I don't know but let me know if it fulfills your requirement.

edited Mar 21 '20 at 20:33

answered Mar 21 '20 at 20:27

Sajeeb Ahamed

6,070
2
21
30

Thank you, but why clicked is logging on init time ? – jsduniya Mar 21 '20 at 20:30
It's just for showing you. Just remove the ```this.element.click()``` line will allow you to work as usual. – Sajeeb Ahamed Mar 21 '20 at 20:33
1

Check it now. It works after clicking on the ```ok``` button. – Sajeeb Ahamed Mar 21 '20 at 20:34

Create class to handle click and other events of element

1 Answers1