[GopherJS] mouseenter and mouseleave Event Example

Example of onmouseenter and onmouseleave event via GopherJS.

index.html | repository | view raw

<!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>

app.go | repository | view raw

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]	mouseenter - Event reference \| MDN mouseleave - Event reference \| MDN