Invoking a JavaScript prototype method within a different method

Question

Invoking a JavaScript prototype method within a different method

I have been struggling for some time now as I am not very proficient in javascript object-oriented programming. My goal is to create a callback API to detect when an element is being scrolled. However, I am facing difficulty in invoking the prototype method from another method. Can someone please assist me with this?

     //HTML
     //<div style="width:500px;height:500px;"id="myElement"></div>

     //JS
       mousewheelListen=function(){
            this.el.addEventListener('wheel',);//How can I call Scroller.prototype.scrolling() ?
        }
        Scroller=function(el){//Constructor
            this.el=el;
            mousewheelListen.call(this);
        }
        Scroller.prototype.scrolling=function(callback){//
            callback.call(this);
        }
        
        
        var el=document.getElementById('myElement');
        var myScroller=new Scroller(el);
        myScroller.scrolling(function(){//Listening for scrolling events
            console.log('scrolling');
        });

javascript

Answer 1

Answer №1

Success! This solution seems to have solved the issue.

All code that relies on DOM elements has been moved into a function that executes after all DOM Content is loaded. Additionally, the wheel event listener has been added to the specified element.

var myScroller;

function Scroller(el) { //Constructor
    this.el=el;
    this.el.addEventListener('wheel', this.scrolling, { passive: true })
}

Scroller.prototype.scrolling = function(event){ //
    console.log(event);
}

window.addEventListener("DOMContentLoaded", function() {
  let el = document.getElementById('myElement');
  myScroller=new Scroller(el);
})

<div style="width:100px;height:100px;border:1px solid black" id="myElement"></div>

Below showcases the same functionality using three different strategies, each resulting in a unique version of this within the scroll function. All methods are effective, with potential arguments for and against each. Ultimately, the choice comes down to practicality.

var myScroller;

function Scroller(el) { //Constructor
    this.el=el;
    this.el.addEventListener('wheel', this.scrolling, { passive: true })
    document.getElementById('element2').addEventListener('wheel', this.scrolling2.bind(this), { passive: true })
}

Scroller.prototype.scrolling = function(event){ //
    console.log(`this is myElement: ${this == document.getElementById('myElement')}`)
}

Scroller.prototype.scrolling2 = function(event){ //
    console.log(`this is myScroller: ${this == myScroller}`)
}

window.addEventListener("DOMContentLoaded", function() {
  document.getElementById('element3').addEventListener('wheel', (event) => { console.log(`this is window: ${this == window}`) }, { passive: true })
  let el = document.getElementById('myElement');
  myScroller=new Scroller(el);
})

<div style="width:100px;height:100px;border:1px solid black" id="myElement"></div>
<div style="width:100px;height:100px;border:1px solid black" id="element2"></div>
<div style="width:100px;height:100px;border:1px solid black" id="element3"></div>

The following can be considered the most elegant approach as it binds instantiations of anonymous DOM manipulation functions to DOM objects.

let attachScroller = (element) => element.addEventListener('wheel', function(event) { console.log(this.id) }.bind(element), { passive: true })

window.addEventListener("DOMContentLoaded", function() {
  attachScroller(document.getElementById('myElement'))
  attachScroller(document.getElementById('element2'))
})

<div style="width:100px;height:100px;border:1px solid black" id="myElement"></div>
<div style="width:100px;height:100px;border:1px solid black" id="element2"></div>

Answer 2

Success! This solution seems to have solved the issue.

All code that relies on DOM elements has been moved into a function that executes after all DOM Content is loaded. Additionally, the wheel event listener has been added to the specified element.

var myScroller;

function Scroller(el) { //Constructor
    this.el=el;
    this.el.addEventListener('wheel', this.scrolling, { passive: true })
}

Scroller.prototype.scrolling = function(event){ //
    console.log(event);
}

window.addEventListener("DOMContentLoaded", function() {
  let el = document.getElementById('myElement');
  myScroller=new Scroller(el);
})

<div style="width:100px;height:100px;border:1px solid black" id="myElement"></div>

Below showcases the same functionality using three different strategies, each resulting in a unique version of this within the scroll function. All methods are effective, with potential arguments for and against each. Ultimately, the choice comes down to practicality.

var myScroller;

function Scroller(el) { //Constructor
    this.el=el;
    this.el.addEventListener('wheel', this.scrolling, { passive: true })
    document.getElementById('element2').addEventListener('wheel', this.scrolling2.bind(this), { passive: true })
}

Scroller.prototype.scrolling = function(event){ //
    console.log(`this is myElement: ${this == document.getElementById('myElement')}`)
}

Scroller.prototype.scrolling2 = function(event){ //
    console.log(`this is myScroller: ${this == myScroller}`)
}

window.addEventListener("DOMContentLoaded", function() {
  document.getElementById('element3').addEventListener('wheel', (event) => { console.log(`this is window: ${this == window}`) }, { passive: true })
  let el = document.getElementById('myElement');
  myScroller=new Scroller(el);
})

<div style="width:100px;height:100px;border:1px solid black" id="myElement"></div>
<div style="width:100px;height:100px;border:1px solid black" id="element2"></div>
<div style="width:100px;height:100px;border:1px solid black" id="element3"></div>

The following can be considered the most elegant approach as it binds instantiations of anonymous DOM manipulation functions to DOM objects.

let attachScroller = (element) => element.addEventListener('wheel', function(event) { console.log(this.id) }.bind(element), { passive: true })

window.addEventListener("DOMContentLoaded", function() {
  attachScroller(document.getElementById('myElement'))
  attachScroller(document.getElementById('element2'))
})

<div style="width:100px;height:100px;border:1px solid black" id="myElement"></div>
<div style="width:100px;height:100px;border:1px solid black" id="element2"></div>

Answer 3

Answer №2

The issue lies in this section:

myScroller.scrolling(function(){//Detection of scroll
  console.log('scrolling');
});

Here, you are calling a callback function. Your addEventListener is not invoking the callback, but rather it's triggering your scrolling function with a WheelEvent instead of a function. The only instance where it is called as a function is in the preceding code snippet.

A simpler approach would be:

mousewheelListen=function(){
  this.el.addEventListener('wheel', event => Scroller.prototype.scrolling.call(this, event));
}

Scroller=function(el){//Initializer
  this.el=el;
  mousewheelListen.call(this);
}
Scroller.prototype.scrolling=function(){//Detection of scroll
  console.log('scrolling');
}

var el=document.getElementById('myElement');
var myScroller=new Scroller(el);

Answer 4

The issue lies in this section:

myScroller.scrolling(function(){//Detection of scroll
  console.log('scrolling');
});

Here, you are calling a callback function. Your addEventListener is not invoking the callback, but rather it's triggering your scrolling function with a WheelEvent instead of a function. The only instance where it is called as a function is in the preceding code snippet.

A simpler approach would be:

mousewheelListen=function(){
  this.el.addEventListener('wheel', event => Scroller.prototype.scrolling.call(this, event));
}

Scroller=function(el){//Initializer
  this.el=el;
  mousewheelListen.call(this);
}
Scroller.prototype.scrolling=function(){//Detection of scroll
  console.log('scrolling');
}

var el=document.getElementById('myElement');
var myScroller=new Scroller(el);

Invoking a JavaScript prototype method within a different method

Answer №1

Answer №2

Similar questions

Encountered an issue while attempting to import a package in ES6: 'Module specifier "vue" could not be resolved'

Guide on triggering background notifications to display in the foreground of an Angular Firebase application using Angular 9 webapp

What is the process for inserting a string into an array at a specified position?

How come JavaScript variables are able to persist on JQuery Mobile multi-page templates on desktop browsers, but not on mobile browsers?

Issues with vue-cli eslint failing to capture errors

The presence of certain characters is leading to problems in the console

What is the best way to link objectID, name, phone, and other fields from one collection(schema) to a different one in MongoDB

Transmit information to the controller using jQuery in a C# MVC environment

What is the best way to access elements from the following page once you have switched pages using a JavaScript command?

Challenges encountered during the updating of nodes in 3D force graphs

Retrieve binary data of an image from an API and render it on an HTML page

"Facing an issue with Django paginator where redirecting to the same page after submitting a form in views.py is not

Webpage created from scratch encounters technical difficulties on mobile device browser

Find the matching ID and consolidate all the information under one single ID

Utilizing the {{value}} parameter within the JavaScript block of the thinger.io HTML gadget

What is the best approach to managing data organization within a websocket API?

What could be causing the multifiles uploader to fail in uploading files?

What is the best approach to implement a basic image upload functionality?

How come the "colspan" attribute is not functioning properly in my table?

Add and condense sub-row