JavaScript フレームワーク fairy support js
addEventListener

src/js/modules/index.jsを修正しましょう

src/js/modules/index.js
export class Index {

    constructor() {
        
    }

    init() {
        this.eventFunction = $f.linkEvent(window, this, ['contextmenu', 'resize', 'scroll']);
    }

    contextmenu(event) {
        console.log("contextmenu");
        console.log(event);
    }

    resize(event) {
        console.log("resize");
        console.log(event);
    }

    scroll(event) {
        console.log("scroll");
        console.log(event);
    }

}

src/page/index.htmlを修正しましょう

src/page/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div>addEventListener</div>
</body>
</html>

$f.linkEventでaddEventListenerができます
$f.linkEvent(window, this, ['contextmenu', 'resize', 'scroll']);は
window.addEventListener('contextmenu', this.contextmenu.bind(this));
window.addEventListener('resize', this.resize.bind(this));
window.addEventListener('scroll', this.scroll.bind(this));
をしたのと同じことになります
$f.linkEventの戻り値は、キーがイベント名、値が登録した関数のオブジェクトです
WebSocketを実装するときは下記のようにできます
this.ws = new WebSocket('ws://localhost:8888');
this.eventFunction = $f.linkEvent(this.ws, this, ['open', 'message', 'close', 'error']);


次ページタイムライン

目次