CODEWITHSUNDEEP
javascript
philip
philip

Reputation: 345

Calling Javascript prototype method from another method

I am not a javascript object oriented pro and am stuck for a while now. I am trying to implement a call back api so that i can detect when an element is being scrolled. Unfortunately, am unable to fire the prototype method from another method. Please help

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

     //JS
       mousewheelListen=function(){
            this.el.addEventListener('wheel',);//How do 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 when scrolling
            console.log('scrolling');
        });

Upvotes: 2

Views: 118

Answers (2)

Tibrogargan
Tibrogargan

Reputation: 4603

This seems to do the trick.

Moved all DOM element dependent code into a function that runs after all DOM Content has been loaded. Added the wheel event listener on the referenced 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 is a demonstration of the same thing using three different techniques, all of which end up with a different version of this in the actual scroll function. They all work (pretty much the same) and there's arguments that could be made for and against any of them, and people may have strong opinions about all of them. For me, it comes down to "what is going to be the most useful at the time?"

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>

I would call the below the "cleanest" version because it's binding instantiations of anonymous DOM Manipulation methods 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>

Upvotes: 2

Victor
Victor

Reputation: 2371

The problem is that here:

myScroller.scrolling(function(){//Listening when scrolling
  console.log('scrolling');
});

You are invoking a callback. Your addEventListener not invoke your callback, invoke your scrolling function with an WheelEvent, not a function. The only point in which is invoked witha functión is in the previous piece of code.

You can simply do this:

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

Scroller=function(el){//Constructor
  this.el=el;
  mousewheelListen.call(this);
}
Scroller.prototype.scrolling=function(){//Listening when scrolling
  console.log('scrolling');
}

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

Upvotes: 1

Related Questions