Может ли дочерний класс отвечать на события, захваченные его супер? - PullRequest
Новая
       23

Может ли дочерний класс отвечать на события, захваченные его супер?

0 голосов
/ 04 мая 2019

У меня есть собственный класс, который я расширяю для различных целей, и следующий код работает просто отлично: 

class Inator {
    constructor(whichCanvas) {
        this.myCanvas = whichCanvas;
    }
}

class Ballgowninator extends Inator {
    constructor(whichCanvas) {
        super(whichCanvas);
        this.myCanvas.addEventListener("mousedown",this.handleMouseDown);
        this.myCanvas.addEventListener("mouseup",this.handleMouseUp);
    }
    handleMouseDown(e) {
        alert("ballgowninator mousedown");
    }
    handleMouseUp(e) {
        alert("ballgowninator mouseup");
    }
}

class Yodelinator extends Inator {
    constructor(whichCanvas) {
        super(whichCanvas);
        this.myCanvas.addEventListener("mousedown",this.handleMouseDown);
        this.myCanvas.addEventListener("mouseup",this.handleMouseUp);
    }
    handleMouseDown(e) {
        alert("yodelinator mousedown");
    }
    handleMouseUp(e) {
        alert("yodelinator mouseup");
    }
}

(Mousedown и mouseup - это только два примера; я хочу иметь возможность обрабатывать другие события мыши и даже события клавиатуры).

Есть ли способ переместить часть этого дублированного кода в суперкласс Inator? Я предполагаю, что в классе superList нет никакого способа ссылаться на функцию в дочернем классе.

РЕДАКТИРОВАТЬ: я должен, что, хотя обработчики событий очень похожи в этом примере, на практике события могут быть обработаны совсем по-другому, или даже проигнорированы.

Спасибо!

1 Ответ

1 голос
/ 04 мая 2019

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

Вы можете сделать что-то вроде этого: 

class Inator {
    constructor(whichCanvas, mouseDown, mouseUp) {
        this.myCanvas = whichCanvas;
        this.myCanvas.addEventListener("mousedown", mouseDown);
        this.myCanvas.addEventListener("mouseup", mouseUp);
    }
}

class Ballgowninator extends Inator {
    constructor(whichCanvas) {
        super(whichCanvas, (e) => 
        console.log("ballgowninator mousedown"), (e) => 
        console.log("ballgowninator mouseup"));
    }    
}

class Yodelinator extends Inator {
    constructor(whichCanvas) {
        super(whichCanvas, (e) => 
        console.log("yodelinator mousedown"), (e) => 
        console.log("yodelinator mouseup"));
       
    }
   
}

const canvas = document.getElementById('canvas');
const b = new Ballgowninator(canvas);
const y = new Yodelinator(canvas);
<h1 id="canvas">CLICK ME!!!</h1>
...