[GopherJS] mouseenter and mouseleave Event Example
Example of onmouseenter and onmouseleave event via GopherJS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GopherJS mouseenter/mouseleave Demo</title>
<style>#demo{background-color: yellow; width: 10em; height: 10em;}</style>
</head>
<body>
<div id="demo"></div>
<div id="info">move your mouse enter and then leave the yellow area.</div>
<script src="app.js"></script>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | package main
import (
"github.com/gopherjs/gopherjs/js"
)
func main() {
demo := js.Global.Get("document").Call("getElementById", "demo")
info := js.Global.Get("document").Call("getElementById", "info")
demo.Call("addEventListener", "mouseenter", func(event *js.Object) {
info.Set("innerHTML", "mouse entered")
}, false)
demo.Call("addEventListener", "mouseleave", func(event *js.Object) {
info.Set("innerHTML", "mouse leaved")
}, false)
}
|
To see demo: use GopherJS to compile app.go to app.js. Put index.html and app.js in the same directory. Open index.html with your browser.
Tested on:
- Ubuntu Linux 16.10
- Go 1.7.4
- Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
References:
| [1] | GopherJS - A compiler from Go to JavaScript
(GitHub,
GopherJS Playground,
 ) |
| [2] |