DOM events opvangen in js class

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Developer / Domotica / Public Cloud / Verbete

Functieomschrijving Wil jij als Java Developer een bijdrage leveren aan het ontwikkelen van innovatie Java applicaties die het levensgeluk van patiënten in diverse zorginstellingen aanzienlijk verbeterd? Lees dan snel verder! Ontwikkelen van nieuwe applicaties in Public Cloud; Optimaliseren en verbeteren van bestaande applicaties in Private Cloud; Meedenken over verbeterprojecten; Maken en uitvoeren van Stress Testing; Ontwikkelen en verbeteren van de Mobile app. Functie-eisen Hbo werk- en denkniveau; Minimaal 5 jaar relevante werkervaring; Ervaring in Java 8; Kennis van Linux, Public- en Private Cloudtechnieken; Je bent communicatief erg sterk en kan tegen de nodige stress. Bedrijfsomschrijving Deze organisatie is al ruim

Bekijk vacature »

Jan Kila

Jan Kila

11/01/2020 12:44:12
Quote Anchor link
Ik zit nu al enige tijd te goochelen op hoe ik een DOM-event, zoals een muis klik, kan opvangen en afhandelen binnen een javascript class (object).
Misschien kijk ik gewoon niet goed genoeg, maar heeft iemand een suggestie?

Even in verkorte vorm wat ik tot dusver heb gedaan:
1.
in een div een canvas gemaakt:
<canvas id="mainCanvas" style="z-index:0" width="100" height="100"></canvas>
2.
met: window.onload = initCanvas(); een functie gestart.
3.
In de start functie:
function initCanvas() {
//alert('It works');
canvasArea.create(bodyWidth);
canvasArea.drawGrid();
} // initCanvas()
4.
in het js object het canvas aanpassen:
var canvasArea = { // initializes object instance.
canvas : document.getElementById('mainCanvas'),
create : function(bodyWidth) {
this.canvas.width = 0.8 * bodyWidth;
this.canvas.height = 0.8 * this.canvas.width;
this.context = this.canvas.getContext('2d');
}, // create canvas function() =======================

En nog een reeks andere functies wo drawGrid()
} // canvasArea ======================================

In dit object wil ik een eventlistener met afhandeling plaatsen.
5.
Tot dusver werkt het alleen als de eventlistener BUITEN het object plaats.
canvas = document.getElementById('mainCanvas');
resizeCanvas(canvas);

window.addEventListener('resize', function(event) {
resizeCanvas(canvas);
});

function resizeCanvas(canvas) {
var bodyWidth = document.body.clientWidth; // width of <body>
if ((bodyWidth <= maxWidth) && (bodyWidth >= minWidth)) {
//resize the canvas
canvas.width = 0.8 * bodyWidth;
canvas.height = 0.8 * canvas.width;
canvasArea.drawGrid();
return canvas;
};

} // resizeCanvas() ===============================================

wat ik al zei: heeft iemand een suggestie hoe dit BINNEN het object kan?
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.