JavaScript Framework fairy support js
table of contents
AddEventListener

Let's change 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);
    }

}

Let's change 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>

You can addEventListener by calling $f.linkEvent.
$f.linkEvent(window, this, ['contextmenu', 'resize', 'scroll']); is the same as doing window.addEventListener('contextmenu', this.contextmenu.bind(this)); , window.addEventListener('resize', this.resize.bind(this)); and window.addEventListener('scroll', this.scroll.bind(this));.
The return of $f.linkEvent is the object that key is the event name and the value is the registered function.
For example, when coding WebSocket, you can do as follows.
this.ws = new WebSocket('ws://localhost:8888');
this.eventFunction = $f.linkEvent(this.ws, this, ['open', 'message', 'close', 'error']);


Next page Timeline

table of contents