pyTonyc/mouse_events.html

## mouse_events.html
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Eventos de mouse</title>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">
    </script>
    <script type="text/python">
    """
    Testando eventos de mouse com Brython.

    Sobre o Bind: bind(css_selector, evento)

    Informações sobre eventos na doc do Brython:
    https://www.brython.info/static_doc/en/events.html
    https://www.brython.info/static_doc/en/mouse_events.html

    Events API:
    https://developer.mozilla.org/en-US/docs/Web/API/event

    CSS2 dom level:
    https://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/CSS2Properties.html
    """

    from browser import document, bind

    btn_span_map = {
        'btn-1': 'span-1',
        'btn-2': 'span-2',
        'btn-3': 'span-3',
        'btn-4': 'span-4',
    }

    def event(target, text, color):
        span = btn_span_map[target]
        document[span].text = text
        document[target].style.color = color


    @bind('button', 'mouseup')
    def span_down(evt):
        event(evt.currentTarget.id, 'mouse_up', 'blue')


    @bind('button', 'mouseenter')
    def span_down(evt):
        event(evt.currentTarget.id, 'mouse_enter', 'orange')


    @bind('button', 'mouseleave')
    def span_down(evt):
        event(evt.currentTarget.id, 'mouse_leave', 'green')


    @bind('button', 'mousedown')
    def span_up(evt):
        event(evt.currentTarget.id, 'mouse_down', 'tomato')

    </script>
  </head>
  <body onload="brython(1)">

    <button id="btn-1" type="button" name="button">Botão</button>
    <span id="span-1"></span>

    <br>

    <button id="btn-2" type="button" name="button">Botão</button>
    <span id="span-2"></span>

    <br>

    <button id="btn-3" type="button" name="button">Botão</button>
    <span id="span-3"></span>

    <br>

    <button id="btn-4" type="button" name="button">Botão</button>
    <span id="span-4"></span>

  </body>
</html>
	<html lang="pt-BR">
	<head>
	<meta charset="utf-8">
	<title>Eventos de mouse</title>
	<script type="text/javascript"
	src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">
	</script>
	<script type="text/python">
	"""
	Testando eventos de mouse com Brython.

	Sobre o Bind: bind(css_selector, evento)

	Informações sobre eventos na doc do Brython:
	https://www.brython.info/static_doc/en/events.html
	https://www.brython.info/static_doc/en/mouse_events.html

	Events API:
	https://developer.mozilla.org/en-US/docs/Web/API/event

	CSS2 dom level:
	https://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/CSS2Properties.html
	"""

	from browser import document, bind

	btn_span_map = {
	'btn-1': 'span-1',
	'btn-2': 'span-2',
	'btn-3': 'span-3',
	'btn-4': 'span-4',
	}

	def event(target, text, color):
	span = btn_span_map[target]
	document[span].text = text
	document[target].style.color = color


	@bind('button', 'mouseup')
	def span_down(evt):
	event(evt.currentTarget.id, 'mouse_up', 'blue')


	@bind('button', 'mouseenter')
	def span_down(evt):
	event(evt.currentTarget.id, 'mouse_enter', 'orange')


	@bind('button', 'mouseleave')
	def span_down(evt):
	event(evt.currentTarget.id, 'mouse_leave', 'green')


	@bind('button', 'mousedown')
	def span_up(evt):
	event(evt.currentTarget.id, 'mouse_down', 'tomato')

	</script>
	</head>
	<body onload="brython(1)">

	<button id="btn-1" type="button" name="button">Botão</button>
	<span id="span-1"></span>

	<br>

	<button id="btn-2" type="button" name="button">Botão</button>
	<span id="span-2"></span>

	<br>

	<button id="btn-3" type="button" name="button">Botão</button>
	<span id="span-3"></span>

	<br>

	<button id="btn-4" type="button" name="button">Botão</button>
	<span id="span-4"></span>

	</body>
	</html>